🥙一、简介
css3中position有个属性值sticky,即粘型定位,初级面试中会经常问到,大多数面试者往往会忽略这个属性值,其可以理解为相对定位(relative)和固定定位(fixed)的结合。
position:sticky
的元素并不会脱离文档流top
、left
等设置无效)fixed
,根据设置的left
、top
的值进行定位,像是fixed
效果🥪二、使用场景
🌮三、注意事项
🍰四、案列
这是本人的测试案例,包含了使用场景和注意事项中的所有条件,可以根据自己的需求进行更改
<style>
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
/* .box {
overflow: scroll;
margin-top: 100px;
width: 100%;
height: 500px;
background: #ff0;
} */
/* .content {
width: 100%;
height: 800px;
overflow: auto;
background: #4CAF50;
} */
</style>
<div class="content">
<div class="box">
<p>测试数据</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">粘性定位!</div>
<div style="padding-bottom:2000px">
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
</div>
</div>
</div>
修改css,测试sticky满足的条件,以上案例是可以正常进行sticky的,over
我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。