定位

优质
小牛编辑
160浏览
2023-12-01

position 的值有 staticrelativeabsolutefixedsticky,其中 static 为默认值。值不是 static 的元素被称为「定位元素」:

  • 值为 relative 的称为「相对定位元素」;

  • 值为 absolutefixed 的称为「绝对定位元素」;

  • 值为 sticky 的称为「粘性定位元素」。

不同值的定位基准及其他一些说明如下:

定位基准

其他说明

static

-

relative

自己

保留在文档流中;当 z-index 的值不是 auto 时会创建新的层叠上下文

absolute

最近一个定位的祖先元素

从正常文档流中移除;当 z-index 的值不是 auto 时会创建新的层叠上下文

fixed

正常情况下是可视视口(html 所在的初始包含块)

从正常文档流中移除;会创建新的层叠上下文

sticky

最近的滚动中的祖先元素

会创建新的层叠上下文