绝对定位与包含块

绝对定位元素会脱离正常文档流。其他元素会认为它不存在。它会相对于最近的已定位祖先进行定位。

绝对定位元素的包含块是其最近的、position 值不是 static 的祖先。如果不存在这样的祖先，该元素会相对于初始包含块（视口）进行定位。

最常见的模式是：为父元素添加 position: relative，以包含绝对定位的子元素。

使用绝对定位时，top/right/bottom/left 会从包含块的内边距边缘开始测量。

绝对定位元素的经典居中技术：

绝对定位元素默认会根据内容收缩尺寸（除非设置了宽度/高度）。它们不再像块级元素一样拉伸到容器的完整宽度。

将四个边缘都设置为 0，可以使绝对定位元素拉伸并填满其包含块：

inset 属性是 top、right、bottom、left 的简写形式：

绝对定位元素会参与层叠上下文。请使用 z-index 控制重叠的绝对定位元素中哪个显示在上方。

如果忘记为父元素添加 position: relative，绝对子元素会相对于最近的已定位祖先进行定位——而这个祖先通常是视口。请始终检查包含块。

Flex 或 Grid 容器不是自动成为已定位元素。您仍然需要显式添加 position: relative，使其成为绝对子元素的包含块。

如果绝对定位元素的所有祖先的 position 都是 static，该元素会被放置在哪里？

绝对定位元素会脱离文档流，并相对于最近的非静态祖先进行定位。请始终为父元素添加 position: relative 以控制放置位置。使用 inset: 0 可使绝对定位元素拉伸并填满其容器。