文章中对粘性定位是否脱离文档流给出了结论,但是并未刻意给出证明与演示。
首先明确一下,粘性定位并不会脱离文档流。
代码证实如下:
   [ 其他 ] 运行代码    下载代码
<!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是否脱离文档流



81 107



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 jshtml对象 javascripthtml对象

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到