其实本文的标题有点傻,既然定位元素不在同一父元素下,那么HTML结构也就不同,很自然就会产生这样那样的不同,归根结底都是由粘性定位的特点所决定的,透过现象了解本质是学习的关键所在,并不是要单纯记忆在和种场景下会出现何种现象,而是要真切理解其中的原理,最终达到灵活运用的目的。写本文主要有两个目的:
(1).提醒读者选择合理的布局结构,才能够达成不同的布局效果。
(2).在文章展开过程中,巩固一下粘性定位的一些特点。
下面进入正题,首先看一段代码实例:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<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.51qianduan.com/" /> 
<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定位元素是否在同一父元素中区别



107 142



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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