跳到主要内容

定位可以把元素放到想放的位置。定位允许将元素从正常的文档流取出，并使其具有不同的行为。

一、 position 的取值​

  • static：静态定位。默认值，正常的文档流
  • relative：相对定位。相对自身原位置偏移，不脱离文档流（占位）
  • absolute：绝对定位。相对最近的非 static 祖先定位，脱离文档流（不占位）
  • fixed：固定定位。相对视口定位，脱离文档流（常用于导航栏、弹窗）
  • sticky：黏连定位。滚动时在指定阈值内相对定位，超出后固定（常用于吸顶效果）

二、 定位上下文的概念​

特别是 relative 和 absolute 的关系。

三、 z-index 的工作原理​

元素在三维空间的渲染层级（类似于 PS 图层）。

z-index 仅在同一层叠上下文有效，值越大越靠上（负值会被普通元素覆盖）

1. 创建条件​

  • position: 非 static + z-index: 非 auto
  • flex/grid 子元素 + z-index: 非 auto
  • opacity: < 1
  • transform: 非 none