position: sticky是否脫離文件流

admin發表於2018-12-23

關於粘性定位的基本用法可以參閱CSS position:sticky 粘性定位一章節。

文章中對粘性定位是否脫離文件流給出了結論，但是並未給出證明與演示。

首先明確一下，粘性定位並不會脫離文件流。

程式碼證實如下：

[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{
  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">螞蟻部落一</div>
      <p>CSS教程</p>
    </section>
  </div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/23/133330fu6mcbm2m7hhsxhe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.如果脫離文件流，那麼文件原本佔據文件流的位置會被它後面的元素填補。

（2）.然而div元素產生固定效果後，它後面的p元素並沒有填補它原本佔據的位置。

（3）.也就是說粘性定位元素不會脫離文件流，依然佔據文件流的指定位置。

相關文章