聊聊css position属性及其sticky属性值的特性(吸顶特效)

本文收纳于： 从零开始的大前端筑基之旅(深刻浅出，持续更新～)

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

例如：

.element {
  position: relative;
  top: 50px;
  left: 50px;
}
复制代码

取值

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（所以会在此元素未添加定位时所在位置留下空白）。

position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

如上图所示，虽然第一个方块由于relative移动了位置，但并未影响页面本来布局。

absolute

元素会被移出正常文档流，并不为元素预留空间，经过指定元素相对于最近的非 static 定位祖先元素的偏移，来肯定元素位置。绝对定位的元素能够设置外边距（margins），且不会与其余边距合并。

此时，蓝色框的父元素设置为 position: relative，用来限定子元素绝对定位的位置，child element 设置为 top: 80px, left: 50px

fixed

元素会被移出正常文档流，并不为元素预留空间，而是经过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出如今的每页的固定位置。fixed 属性会建立新的层叠上下文。

当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改成该祖先。

sticky

元素根据正常文档流进行定位，而后相对它的_最近滚动祖先（nearest scrolling ancestor）_和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其余元素的位置。该值老是建立一个新的层叠上下文（stacking context。

注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即使这个祖先不是真的滚动祖先。

sticky详解

粘性定位能够被认为是相对定位和固定定位的混合。当元素在屏幕或滚动元素显示区域时，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

能够滚动下面这个框感觉下交互表现

A

Andrew W.K.

Apparat

Arcade Fire

At The Drive-In

Aziz Ansari

C

Chromeo

Common

Converge

Crystal Castles

Cursive

E

Explosions In The Sky

T

Ted Leo & The Pharmacists

T-Pain

Thrice

TV On The Radio

Two Gallants

其中，标示A被设置为：

{
    position: sticky;
    top: 10px;
  }
复制代码

随着页面的滚动，当标示A距离上边缘10px距离的时候，黏在了上边缘，表现如同position:fixed。

sticky和fixed定位有着根本性的不一样，fixed元素直抵页面根元素，其余父元素对其left/top定位没法限制。而sticky元素效果彻底受制于父级元素。

层次滚动吸顶

仍是上面的栗子，我在每一个标题组上加了红色或蓝色的边框，这些边框就是标示A、C、E、T的父元素边框，能够很明显的看到，粘性定位的元素在移动到父元素的底部时，就不会再保持吸顶，而是随着父元素移出显示区域。

所以能够推出一些特性：

1. 父级元素设置和粘性定位元素等高的固定的height高度值，或者高度计算值和粘性定位元素高度同样，不会粘滞效果。
2. 同一个父容器中的sticky元素，若是定位值相等，则会重叠；
3. 若是属于不一样父元素，且这些父元素正好紧密相连，则会鸠占鹊巢，挤开原来的元素，造成依次占位的效果。

因为每个标示组，属于不一样的父元素，所以，滚动的时候，后面的标题才能把前面已经sticky定位的标题推开，造成层次滚动吸顶效果。这是sticky定位自然的特性，无需任何JavaScript的帮助。

若是全部的标题头都在同一个父元素下，就会致使全部sticky定位的新闻标题都会重叠在一块儿。

仍是不理解粘性定位规则的花建议看一下参考文档1。

附上浏览器支持：

若是你收获了新知识，或者收获了左侧精美图片，请点个赞吧～

参考文档：

1. 深刻理解position sticky粘性定位的计算规则
2. position | MDN
3. 杀了个回马枪，仍是说说position:sticky吧