- 首先，设置了position:sticky的元素并不会脱离文档流
- 当元素在区域内，元素不受定位的影响（top、left等设置无效）
- 当发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，效果为fixed的效果
代码使用示例如下
<div class="sticky">
'HelloWorld'
</div>
.sticky{
width:300px;
height: 40px;
background-color: lightseagreen;
position:sticky;
top:0;
}
- 必须注意的点
- 设置了position:sticky的元素的效果完全受制于父级元素
- 父元素不能有任何overfolw：visible以外的overflow设置。即使是scroll或者auto也不行
- 父元素的高度不能低于sticky元素的高度
- 同一父容器中的sticky元素，如果定位值相等，则会发生重叠
<div class="sticky">
<div>123</div>
<div>456</div>
<div>789</div>
</div>
.sticky {
width:300px;
height: 400px;
}
.sticky div{
position: sticky;
top:0px;
height: 60px;
background-color: lightpink;
margin-bottom: 20px;
}
- sticky元素如果不属于相同父元素，但是他們的父元素正好紧密相连，则会挤开原来的元素，形成依次占位的效果。
div h4 {
color: #fff;
padding: 10px;
top: 0;
position: sticky;
background-color: green;
}
#section{
background-color: blue;
}
<div>
<div>
<h4>
湖人捧奖杯致敬科比鲁UT4923乘客请检测进博会实行核酸检测丰田c_hr青岛已排查密接132人
</h4>
<div id="section">
文章包括各种文体的著作、作品，如诗歌、戏剧、小说、科学论文，记叙文、议论文、说明文、应用文等等。“千古文章未尽才”“文章千古事”“文章憎命达”“板凳要坐十年冷、文章不写一字空”“积句而成章，积章而成篇”“言出为论，下笔成章”等，都是现在所说的文章的意思。更广义的文章，也包含“学问”“奥秘”等意思，如“洞明世事皆学问，人情练达即文章”就是。
</div>
</div>
<div>
<h4>
湖人捧奖杯致敬科比鲁UT4923乘客请检测进博会实行核酸检测丰田c_hr青岛已排查密接132人
</h4>
<div id="section">
文章包括各种文体的著作、作品，如诗歌、戏剧、小说、科学论文，记叙文、议论文、说明文、应用文等等。“千古文章未尽才”“文章千古事”“文章憎命达”“板凳要坐十年冷、文章不写一字空”“积句而成章，积章而成篇”“言出为论，下笔成章”等，都是现在所说的文章的意思。更广义的文章，也包含“学问”“奥秘”等意思，如“洞明世事皆学问，人情练达即文章”就是。
</div>
</div>
<div>
<h4>
湖人捧奖杯致敬科比鲁UT4923乘客请检测进博会实行核酸检测丰田c_hr青岛已排查密接132人
</h4>
<div id="section">
文章包括各种文体的著作、作品，如诗歌、戏剧、小说、科学论文，记叙文、议论文、说明文、应用文等等。“千古文章未尽才”“文章千古事”“文章憎命达”“板凳要坐十年冷、文章不写一字空”“积句而成章，积章而成篇”“言出为论，下笔成章”等，都是现在所说的文章的意思。更广义的文章，也包含“学问”“奥秘”等意思，如“洞明世事皆学问，人情练达即文章”就是。
</div>
</div>
</div>
- 必须制定top,left,bottom,right四个中的至少一个，否则其行为与相对定位相同，并且top和bottom同时设置时，top的优先级高；left和right同时设置时，left的优先级高。
