position:sticky定位元素是否在同一父元素中區別

admin發表於2018-12-23

position:sticky粘性定位的基本知識參閱CSS position:sticky 粘性定位一章節。

其實本文的標題有點傻，既然定位元素不在同一父元素下，那麼HTML結構也就不同，很自然就會產生這樣那樣的不同，歸根結底都是由粘性定位的特點所決定的，透過現象瞭解本質是學習的關鍵所在，並不是要單純記憶在和種場景下會出現何種現象，而是要真切理解其中的原理，最終達到靈活運用的目的。寫本文主要有兩個目的：

（1）.提醒讀者選擇合理的佈局結構，才能夠達成不同的佈局效果。

（2）.在文章展開過程中，鞏固一下粘性定位的一些特點。

下面進入正題，首先看一段程式碼例項： 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.container {
  background: #eee;
  width: 400px;
  height: 1000px;
  margin: 120px auto;
}
.sticky {
  position: sticky;
  height: 60px;
  line-height: 60px;
  margin-bottom: 30px;
  background: #ccc;
  top: 50px;
}
div {
  font-size: 30px;
  text-align: center;
  color: #fff;
}
</style>
</head>
<body>
  <div class="container">
    <div class="sticky">螞蟻部落一</div>
    <div class="sticky">螞蟻部落二</div>
    <div class="sticky">螞蟻部落三</div>
    <div class="sticky">螞蟻部落四</div>
  </div>
</body>
</html>

大家可以拖動滾動條檢視定位效果，程式碼分析如下：

（1）.所有粘性定位div元素都位於同一個父元素之下。

（2）.當拖動滾動條的時候，到達top設定的臨界值，元素就會固定下來。

（3）.可以觀察到，粘性定位的div元素都會重疊在一起，層疊順序是後來者居上。

如果將這些粘性定位元素放置於不同的父元素下，表現會有所不同，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.container {
  background: #eee;
  width: 400px;
  height: 1000px;
  margin: 120px auto;
}
.sticky {
  position: sticky;
  height: 60px;
  line-height: 60px;
  background: #ccc;
  top: 50px;
}
section{
  max-width: 600px;
  margin-bottom: 30px;
  overflow:visible;
}
p{color:green}
div {
  font-size: 30px;
  text-align: center;
  color: #fff;
}
</style>
</head>
<body>
  <div class="container">
    <section>
      <div class="sticky">螞蟻部落一</div>
      <p>CSS教程</p>
    </section>
    <section>
      <div class="sticky">螞蟻部落二</div>
      <p>CSS教程</p>
    </section>
    <section>
      <div class="sticky">螞蟻部落三</div>
      <p>CSS教程</p>
    </section>
    <section>
      <div class="sticky">螞蟻部落四</div>
      <p>CSS教程</p>
    </section>
  </div>
</body>
</html>

大家可以拖動滾動條檢視定位效果，程式碼分析如下：

（1）.粘性定位元素分別位於各自的<section>父元素下。

（2）.現在拖動滾動條，認真觀察效果會發現如下幾個特點。

（3）.首先，top、bottom、left和right屬性定位參考是以距離它最近的具有滾動條父元素為定位參考物件，如果是頁面出現滾動條，則以視口包含塊為定位參考物件，所以當拖動滾動條時，距離視口頂部50px的時候，粘性定位元素會固定。

（4）.但是粘性定位元素的固定範圍不會超出它的直接父元素，也就是不會超出它所在的紅框。

（5）.正是由於上面的原因，粘性定位的div元素之間不會覆蓋在一起，因為受限於它們的直接父元素。

相關文章