CSS3之position:sticky使用-阿里云开发者社区

CSS3之position:sticky使用

2022-11-27 251

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>