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

最新推荐文章于 2026-07-03 13:42:11 发布

原创最新推荐文章于 2026-07-03 13:42:11 发布 · 275 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

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

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

还有一种没有回答出来，

static

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

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

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

position 在css3中增加了三种属性

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

1.需求

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

之前实现方式是监听页面滚动，当页面滚动到指定区域时把对应的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用法。