position: sticky是否脱离文档流

文章中对粘性定位是否脱离文档流给出了结论，但是并未刻意给出证明与演示。
首先明确一下，粘性定位并不会脱离文档流。
代码证实如下：

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<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是否脱离文档流

下载全部收藏

640 854

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

月映东窗

作品：41 | 粉丝：21

关注

TA的相关作品 >>更多

热搜关键词

position: sticky是否脱离文档流

CSS position:sticky与position:fixed区别

CSS input文本框样式

JavaScript 获取第n个li元素

text-align:justify 两端对齐

position:sticky定位元素是否在同一父元素中区别

position:relative相对定位不脱离文档流