通过CSS的sticky属性重新回顾 position

你的名字 2023-01-15 11:29 130阅读 0赞

前言：依稀记得刚学习前端找工作问过我一个面试题，css的position的属性有几种，我回答的是

<table> 
 <tbody> 
  <tr> 
   <td>absolute</td> 
   <td> <p>生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</p> <p>元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</p> </td> 
  </tr> 
  <tr> 
   <td>fixed</td> 
   <td> <p>生成绝对定位的元素，相对于浏览器窗口进行定位。</p> <p>元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</p> </td> 
  </tr> 
  <tr> 
   <td>relative</td> 
   <td> <p>生成相对定位的元素，相对于其正常位置进行定位。</p> <p>因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。</p> </td> 
  </tr> 
 </tbody> 
</table>

还有一种 没有回答出来，

<table> 
 <tbody> 
  <tr> 
   <td>static</td> 
   <td>默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</td> 
  </tr> 
 </tbody> 
</table>

自此之后 我就坚定的认为 position 有四种属性。

这其实只是 css2 的position 的四种属性  也是最常用 且 兼容性最好的四种属性。

**position 在css3中增加了 三种属性 **

<table> 
 <tbody> 
  <tr> 
   <td>inherit</td> 
   <td>此属性是继承祖父级定位，祖父标签为absolute，它就会为absolute，祖父标签为relative，它就会为 relative，祖父为fixed、static等亦如此。</td> 
  </tr> 
  <tr> 
   <td>sticky</td> 
   <td>这个属性尴尬的一批，基本浏览能兼容的寥寥无几，ie,operaMINI 全军覆没，firefox 26以上，chrome 6.1以上…但是，我们也需要知道它。它是粘贴定位，用于一些特殊场景如：固定头部元素，向上滚动超出距离不消失。指定top、left、right、bottom 其中一个阙值生值，粘贴定位才会生效，否则，它的行为等同一个相对定位。它的解释是，监听页面的srcoll 事件，当元素超过视图区块顶部、左边、右边、下边距离后，添加 fixed，反之，则去掉。注意：1.优先级：top&gt;left&gt;right&gt;bottom。 2. 祖父元素必须设置 overflow: visible。</td> 
  </tr> 
  <tr> 
   <td>unset</td> 
   <td>是inital 和inherit的结合，设置在 top、left、right、bottom 上，意思是当属性值为可继承元素，那它等同于 inherit，非可继承元素，则等同于 inital。</td> 
  </tr> 
 </tbody> 
</table>

**1.需求**

很常规的一个需求，移动端的页面 分多个模块，每个模块有一个title ，在页面向上滚动到对应模块时，title固定在头部。 如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmdsZWkxMjM_size_16_color_FFFFFF_t_70][]

之前实现方式是 监听页面滚动，当页面滚动到指定区域时把对应的title设置成fixed。非常的麻烦

**2.实现**

<body>
        <style> 
        .title{
            border-left: 5px solid blue;
            padding: 3px 15px;
            font-weight: 900;
            position: sticky;
            top: 0;
            background: #fff;
        }
        .content{
            border: 1px solid red;
            height: 1000px;
        }
        </style>
        <div>
            <div class="title">这是标题1111</div> 
            <div class="content" >
                这是模块1 
            </div>
            <div class="title">这是标题2</div> 
            <div class="content">
                这是模块2
            </div>
        </div>
    </body>

一行样式就完成了  可以说是非常的银杏。

总结：复习下position用法。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhbmdsZWkxMjM_size_16_color_FFFFFF_t_70]: /images/20221022/1eec335b6bcd4260bd2ee6b7ab2f0264.png