其实本文的标题有点傻，既然定位元素不在同一父元素下，那么HTML结构也就不同，很自然就会产生这样那样的不同，归根结底都是由粘性定位的特点所决定的，透过现象了解本质是学习的关键所在，并不是要单纯记忆在和种场景下会出现何种现象，而是要真切理解其中的原理，最终达到灵活运用的目的。写本文主要有两个目的：
（1）.提醒读者选择合理的布局结构，才能够达成不同的布局效果。
（2）.在文章展开过程中，巩固一下粘性定位的一些特点。
下面进入正题，首先看一段代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.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;
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">乐分享一</div>
<div class="sticky">乐分享二</div>
<div class="sticky">乐分享三</div>
<div class="sticky">乐分享四</div>
</div>
</body>
</html>
大家可以拖动滚动条查看定位效果，代码分析如下：
（1）.所有粘性定位div元素都位于同一个父元素之下。
（2）.当拖动滚动条的时候，到达top设置的临界值，元素就会固定下来。
（3）.可以观察到，粘性定位的div元素都会重叠在一起，层叠顺序是后来者居上。
如果将这些粘性定位元素放置于不同的父元素下，表现会有所不同，代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.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{
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">乐分享一</div>
<p>CSS教程</p>
</section>
<section>
<div class="sticky">乐分享二</div>
<p>CSS教程</p>
</section>
<section>
<div class="sticky">乐分享三</div>
<p>CSS教程</p>
</section>
<section>
<div class="sticky">乐分享四</div>
<p>CSS教程</p>
</section>
</div>
</body>
</html>
大家可以拖动滚动条查看定位效果，代码分析如下：
（1）.粘性定位元素分别位于各自的<section>父元素下。
（2）.现在拖动滚动条，认真观察效果会发现如下几个特点。
（3）.首先，top、bottom、left和right属性定位参考是以距离它最近的具有滚动条父元素为定位参考对象，如果是页面出现滚动条，则以视口包含块为定位参考对象，所以当拖动滚动条时，距离视口顶部50px的时候，粘性定位元素会固定。
（4）.但是粘性定位元素的固定范围不会超出它的直接父元素，也就是不会超出它所在的红框。
（5）.正是由于上面的原因，粘性定位的div元素之间不会覆盖在一起，因为受限于它们的直接父元素。
1.《position:sticky定位元素是否在同一父元素中区别》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《position:sticky定位元素是否在同一父元素中区别》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/260.html