文章中對粘性定位是否脫離文檔流給出了結論,但是并未刻意給出證明與演示。
首先明確一下,粘性定位并不會脫離文檔流。
代碼證實如下:
   [ 其他 ] 運行代碼    下載代碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.vxisgr.tw/" /> 
<title>position: sticky是否脫離文檔流</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{
  box-sizing:border-box;
  max-width: 600px;
  margin-bottom: 30px;
  border:1px solid red;
  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>
  </div>
</body>
</html>
代碼分析如下:
(1).如果脫離文檔流,那么文檔原本占據文檔流的位置會被它后面的元素填補。
(2).然而div元素產生固定效果后,它后面的p元素并沒有填補它原本占據的位置。
(3).也就是說粘性定位元素不會脫離文檔流,依然占據文檔流的指定位置。

代碼描述:position: sticky是否脫離文檔流,position: sticky是否脫離文檔流



46 61



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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