CSS 定位

定位属性

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。

此时 top, right, bottom, left 和 z-index 属性无效。

relative

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

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

absolute

元素会被移出正常文档流，并不为元素预留空间，

通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。

绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

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”行为（详情见Github issue on W3C CSSWG）。

定位属性总结

注意：“元素会被移出正常文档流，并不为元素预留空间”，这句话表示，元素虽然移出文档流，但它还处于static的位置，除非设置了有效的偏移量，并且要注意的是，不设置偏移量和偏移量为0是两个概念。

定位类型

定位元素

除了定位属性是static时不是定位元素，

属性值为relative，absolute，fixed，sticky都称为定位元素。

相对定位元素

属性值为relative。

绝对定位元素

属性值为absolute，fixed。

粘性定位元素

属性值为fixed。

定位类型总结

其它

1. fixed与absolute的共同点
   • 该元素一定是块盒。
   • 会使float失效。
   • 不会产生外边距合并。
2. fixed与absolute的区别
   • absolute元素如果找不到定位的祖先元素，包含块是初始包含块，也就是网页第一屏。会跟随网页滑动。fixed元素不会跟随网页滑动。
3. 定位元素的宽高
   • 高度：为自适应文本内容高度。
   • 宽度：relative元素为充满包含块，absolute和fixed元素为自适应文本宽度。
4. 只有定位元素设置z-index才有效

参考

position - CSS | MDN

CSS 定位详解 | 阮一峰