其實本文的標題有點傻,既然定位元素不在同一父元素下,那么HTML結構也就不同,很自然就會產生這樣那樣的不同,歸根結底都是由粘性定位的特點所決定的,透過現象了解本質是學習的關鍵所在,并不是要單純記憶在和種場景下會出現何種現象,而是要真切理解其中的原理,最終達到靈活運用的目的。寫本文主要有兩個目的:
(1).提醒讀者選擇合理的布局結構,才能夠達成不同的布局效果。
(2).在文章展開過程中,鞏固一下粘性定位的一些特點。
下面進入正題,首先看一段代碼實例:
   [ 其他 ] 運行代碼    下載代碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.vxisgr.tw/" /> 
<title>51前端</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">51前端一</div>
    <div class="sticky">51前端二</div>
    <div class="sticky">51前端三</div>
    <div class="sticky">51前端四</div>
  </div>
</body>
</html>
大家可以拖動滾動條查看定位效果,代碼分析如下:
(1).所有粘性定位div元素都位于同一個父元素之下。
(2).當拖動滾動條的時候,到達top設置的臨界值,元素就會固定下來。
(3).可以觀察到,粘性定位的div元素都會重疊在一起,層疊順序是后來者居上。
如果將這些粘性定位元素放置于不同的父元素下,表現會有所不同,代碼實例如下:
   [ 其他 ] 運行代碼    下載代碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.vxisgr.tw/" /> 
<title>51前端</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">51前端一</div>
      <p>CSS教程</p>
    </section>
    <section>
      <div class="sticky">51前端二</div>
      <p>CSS教程</p>
    </section>
    <section>
      <div class="sticky">51前端三</div>
      <p>CSS教程</p>
    </section>
    <section>
      <div class="sticky">51前端四</div>
      <p>CSS教程</p>
    </section>
  </div>
</body>
</html>
大家可以拖動滾動條查看定位效果,代碼分析如下:
(1).粘性定位元素分別位于各自的<section>父元素下。
(2).現在拖動滾動條,認真觀察效果會發現如下幾個特點。
(3).首先,top、bottom、left和right屬性定位參考是以距離它最近的具有滾動條父元素為定位參考對象,如果是頁面出現滾動條,則以視口包含塊為定位參考對象,所以當拖動滾動條時,距離視口頂部50px的時候,粘性定位元素會固定。
(4).但是粘性定位元素的固定范圍不會超出它的直接父元素,也就是不會超出它所在的紅框。
(5).正是由于上面的原因,粘性定位的div元素之間不會覆蓋在一起,因為受限于它們的直接父元素。

代碼描述:position:sticky 定位元素 父元素,position:sticky定位元素是否在同一父元素中區別



50 67



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: js js代碼 js實例 javascript javascript代碼 javascript實例 jshtml對象 javascripthtml對象
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表