CSS position 定位详解
position 属性用于指定元素的定位方式，共有五个取值：static （默认）、relative、absolute、fixed、sticky；
不同定位方式会影响元素的布局和渲染规则；
static
-
默认值，元素遵循正常文档流；
-
忽略 top、right、bottom、left 和 z-index；
-
元素位置由文档流决定；
relative
-
元素遵循正常文档流，但可通过偏移属性调整位置；
-
偏移相对自身原始位置，不影响其他元素布局；
-
仍占据原文档流空间；
absolute
-
元素脱离正常文档流，不占据空间；
-
相对于最近的已定位祖先元素 （非 static） 定位；
-
若无已定位祖先，则相对于初始包含块 （视口）；
-
绝对定位元素的重绘 / 重排成本较高；
fixed
-
元素脱离文档流，相对于视口定位；
-
滚动页面时位置固定不变；
-
常用于导航栏、弹窗等；
sticky
-
结合 relative 和 fixed 的特性；
-
在滚动到阈值前表现为 relative，之后为 fixed；
-
需配合 top/bottom 等偏移属性使用；
CSS Position 定位演示
CSS 定位失效场景演示
层叠上下文
什么是层叠上下文
-
层叠上下文(stacking context)，是 HTML 中一个三维的概念，在 CSS2.1 规范中，每个盒模型的位置是三维的，分别是平面画布上的 X 轴、Y 轴以及表示层叠的 Z 轴；
-
一般情况下，元素在页面上沿 X 轴 Y 轴平铺，察觉不到它们在 Z 轴上的层叠关系；
-
一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖；
-
关键特性
- 独立性：内部元素的堆叠只在当前上下文内生效，不会穿透到外部；
- 继承性：子元素默认继承父元素的层叠上下文，除非自己创建新的上下文；
- 堆叠顺序：上下文本身也有堆叠优先级，会与其他上下文竞争显示顺序；
层叠上下文的创建方式（10 种常见场景）
🔍 关键注意点
- z-index: auto 不会创建新的层叠上下文 （即使是定位元素）；
- Flex/Grid 子元素的 z-index 无需定位即可生效，这是特殊规则；
- 一旦元素创建层叠上下文，其 z-index 值相对于父上下文生效，而非全局；
| 创建方式 | 示例代码 | 说明 |
|---|---|---|
| 根元素（html） | 无需主动创建 | 页面默认的最外层上下文 |
| z-index: 数值 + 定位元素（relative/absolute/fixed/sticky） | .box { position: relative; z-index: 10; } | z-index 为非 auto 时触发 |
| z-index: 数值 + Flex/Grid 子元素 | .flex-container { display: flex; } .item { z-index: 5; } | 子元素无需定位即可生效 |
| opacity < 1 | .box { opacity: 0.8; } | 透明度小于 1 时创建 |
| transform 非 none | .box { transform: translateX(10px); } | 任何变换都会触发 |
| position: fixed/sticky | .box { position: fixed; } | 无需 z-index 也会创建 |
| will-change 包含层叠相关属性 | .box { will-change: transform; } | 提前声明将变化的属性 |
| mix-blend-mode 非 normal | .box { mix-blend-mode: multiply; } | 混合模式触发 |
| isolation: isolate | .box { isolation: isolate; } | 强制创建独立上下文 |
| contain: layout paint | .box { contain: layout paint; } | 布局和绘制隔离 |
层叠等级与层叠顺序
-
除了层叠上下文，还需要了解 层叠等级 （ stacking level ）、层叠顺序 （ stacking order ） 两个概念：
-
这两个东西实际上都是用来表述：在同一个层叠上下文中，元素在 z 轴上的显示顺序 ，只不过前一个是概念，后一个是具体规则；
-
如果两个元素在同一个层叠上下文中，那么层叠等级越大的元素，就越靠前；
- 那么问题来了，我怎么知道该元素的层叠等级是高还是低？
- 所以层叠等级的高低规则是由层叠顺序来体现的；
- 在 CSS2.1 的年代 （注意这里的前提），层叠顺序规则遵循下面这张图：
-
那么如果两个元素不在同一个层叠下上文中呢？那么此时就先比较他们所处的层叠上下文的层叠等级，也就是所谓的 从父 现象，比较他们的父元素即可；
层叠上下文场景演示
CSS 高级✍️ 隐藏元素的方式
上一篇
