CSS粘性定位是怎样工作的

秒速五厘米 2022-03-07 09:38 378阅读 0赞

> 翻译：疯狂的技术宅  
> 原文： [https://medium.com/@elad/css-...][https_medium.com_elad_css-...]

--------------------

本文首发微信公众号：jingchengyideng  
欢迎关注，每天都给你推送新鲜的前端技术文章

--------------------

浏览器对 CSS粘性定位有着非常好的支持，但很多开发者都没有用过它。

究其原因有两个：

第一，受到浏览器的良好支持需要漫长的等待：浏览器的支持往往需要很长的时间才能完成，到时候它的功能已经被人们遗忘了。

第二个原因是很多开发者并不能完全理解其工作原理背后的逻辑，这就是我的切入点。

![clipboard.png][]

我假设你们都知道什么事CSS定位，不过还是先简单回顾一下比较好：

在3年前，有四种 CSS 定位： `static`、 `relative`、 `absolute` 和 `fixed`。

`static` 、 `relative` 、 `absolute` 和 `fixed`之间主要的区别在于它们在DOM流中占用的空间。 `static` 和 `relative` 会保留它们在文档流中的自然空间，而 `absolute` 和 `fixed` 则不会 —— 它们的空间被移除而且具有浮动行为。

正如我下面将要解释的那样，新的粘性定位与所有类型都有相似之处。

### 我的第一个粘性定位 ###

可能很多人都玩过粘性定位。我已经接触过一段时间了，直到我意识到自己并不是完全理解它。

在第一个例子中，大家很容易就能看明白 当视口到达定义的位置时，元素会被粘住。

例：

.some-component{
        position: sticky;
        top: 0;
    }

但问题是，它有时候能用，而有时却不起作用。 当它工作时，元素会粘住，但在滚动到其他部分，它会停止粘贴。 作为一个靠 CSS 混饭吃的人，我完全不能接受自己对这个问题是不理解的，所以我决定把粘性位置彻底搞清楚。

### 探索粘性定位 ###

在摆弄它的过程中，我很快就注意到了：当一个具有 `position:sticky` 样式的元素被包装，且它是包装元素中唯一的元素时，这个被定义为 `position:sticky` 的元素就不会粘住。

<style>
        .sticky{
            position: sticky;
            top: 0;
        }
    </style>
    <div class="wrapper">
       <div class="sticky">
            SOME CONTENT
       </div>
    </div>

当我在包装元素中添加更多元素时，它就能开始正常工作了。

#### 这是为什么？ ####

这是因为当一个元素被赋予 `position: sticky` 样式时，粘性项目的容器是它可以粘贴的唯一区域。 粘性元素没有任何要浮动的元素，因为它只能浮动在同级元素上，作为唯一的子元素，它不能浮动。

### 怎样才能让 CSS 粘性定位起作用 ###

CSS 粘性定位有两个主要部分，**粘性元素（sticky item）**和 **粘性容器（sticky container）**。

**粘性元素** —— 是我们用位置定义的 `position: sticky` 样式。 当视口位置与位置定义匹配时，该元素将会浮动，例如： `top: 0px` 。

例：

.some-component{
        position: sticky;
        top: 0px;
    }

**粘性容器** —— 是包装**粘性元素**的 HTML 元素。 这是粘性元素可以浮动的最大区域。

**当你定义一个具有 `position:sticky` 样式的元素时，父元素会被自动定义为粘性容器！**  
记住这一点非常重要！ 容器是粘性元素的范围，并且该元素无法离开其所在的粘性容器。

这就是为什么在前面的例子中，粘性元素没有被粘住的原因：这个粘性元素是粘性容器中唯一的子元素。

**CSS 粘性定位的示意图：**

![粘性元素与粘性容器][342842461-5c601033ed793_articlex]

*粘性元素与粘性容器*

查看在CodePen上的例子：

[https://codepen.io/elad2412/p...][https_codepen.io_elad2412_p...]

### 理解 CSS 的粘性行为 ###

正如我前面说过的那样，CSS 粘性定位的行为与所有其他 CSS 定位不一样，但从另一个角度来说，它们也有一些相似之处。我来解释一下：

**相对**（或静态）—— 粘性定位元素类似于相对和静态位置，因为它保留了 DOM 中的自然间隙（留在流中）。  
**固定** —— 当元素被粘住时，它的行为与 `position: fixed` 完全相同，浮动在与视口的相同位置，并从流中移除。  
**绝对** —— 在粘贴区域的末尾，元素会停止，并堆叠在另一个元素的顶部，就像一个绝对定位的元素被放在一个 `position: relative` 容器内的行为。

### 粘在底部？ ###

在大多数情况下，您可以使用粘性定位将元素粘贴到顶部，如下所示：

.component{
        position: sticky;
        top: 0;
    }

这正是它被设计的初衷，而在此之前，只能使用JavaScript完成这个功能。

但你也可以使用它把元素粘到底部。 这意味着你可以把页脚定义为粘性，并且在向下滚动时使它看起来总是被粘在底部。 当到达粘性容器的末端时，元素会停在它的自然位置。 最好是在以粘性容器底部为自然位置的元素上使用它。

完整示例：

#### **HTML** ####

<main class="main-container">
      <header class="main-header">HEADER</header>
      <div class="main-content">MAIN CONTENT</div>
      <footer class="main-footer">FOOTER</footer>
    </main>

#### **CSS** ####

.main-footer{     
         position: sticky; 
         bottom: 0;
    }

去CodePen查看演示效果：[https://codepen.io/elad2412/p...][https_codepen.io_elad2412_p... 1]

我在开发中常用它来粘贴摘要表，也会用在粘性页脚导航上，这种方法非常适合。

### 浏览器支持 ###

*  除了老 IE 浏览器外，所有流行的现代浏览器都支持粘性定位。
 *  如果用在 Safari 浏览器上，你需要添加 `-webkit` 前缀。

position: -webkit-sticky; /* Safari */  
    position: sticky;

![超过86%的浏览器支持粘性定位][86]

### 最后的话 ###

本文到此就结束了，我希望你能喜欢这篇文章，并从我的经验中学习到一些东西。  
如果你喜欢这篇文章，我会非常感谢你的掌声和分享 :-)

--------------------

#### 本文首发微信公众号：jingchengyideng ####

#### 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章 ####

![欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章][4275054415-59770ff1d8013_articlex]

--------------------

[https_medium.com_elad_css-...]: https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46
[clipboard.png]: /images/20220307/42fbe21c5e604082a398a9b4faf841e5.png
[342842461-5c601033ed793_articlex]: /images/20220307/d4970dc058ea42518767eaffb48f9729.png
[https_codepen.io_elad2412_p...]: https://codepen.io/elad2412/pen/QYLEdK
[https_codepen.io_elad2412_p... 1]: https://codepen.io/elad2412/pen/MZZVjw
[86]: /images/20220307/632fb3ed5c24405db17277f90a5905e0.png
[4275054415-59770ff1d8013_articlex]: /images/20220307/9f07a92e853b40e792d2d237f5c80225.png