CSS3之position:sticky使用

admin管理员组

文章数量:1794759

CSS3之position:sticky使用

🐱个人主页：不叫猫先生 🙋‍♂️作者简介：专注于前端领域各种技术，热衷分享，期待你的关注。 📝个人签名：不破不立

🍬本文目录

• • 🥙一、简介
  • 🥪二、使用场景
  • 🌮三、注意事项
  • 🍰四、案列

🥙一、简介

css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。

🥪二、使用场景

比如导航或者Tab当我们下拉的时候，则会被隐藏，但是我们要实现随着下拉导航或Tab保持在浏览器窗口顶端。

🌮三、注意事项

• 父元素高度必须大于sticky元素的高度
• 不设置父元素高度的时候，父元素不能使用除了overflow的visiable属性，比如auto、scroll
• 设置父元素高度，子元素高度超过父元素高度，父元素使用auto、scroll等属性，此时且出现了滚动，sticky依然是有效
• 设置父元素高度，子元素高度没有超过父元素高度，此时没有出现滚动，sticky仅在父元素高度内有效
• sticky元素需要设置top、bottom、left、right的值

🍰四、案列 <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

本文标签： positionsticky