position: relative 元素即使不设 top/left 或 z-index，也会触发层叠上下文参与排序，因其已脱离 static 定位；其默认 z-index: auto 使其层级高于 static 元素，但低于显式设置正数 z-index 的同级元素。
relative 元素不写 top/left 也会触发 z-index 生效
因为 position: relative 本身就会让元素变成「定位元素」，只要 position 值不是 static（默认值），它就自动获得参与层叠上下文（stacking context）排序的资格。哪怕你只写了一句 position: relative，什么偏移都不加，z-index 就已可被识别和计算。
常见错误现象：
— 两个并排的 div，一个加了 position: relative，另一个没加，结果前者盖住了后者，但开发者完全没设 z-index；
— 检查 computed 样式发现，没设 z-index 的 relative 元素，其 z-index 默认值是 auto，但它仍比 static 元素层级高。
-
z-index: auto对 relative 元素不是“无效”，而是“参与同级比较”：它会在当前层叠上下文中排在所有static元素之上，但低于显式设置了正数z-index的兄弟元素 - 父容器没设
position时，relative 子元素的层叠顺序只跟 HTML 顺序和自身定位状态有关；一旦父级也成了定位元素，子元素的z-index就只在该父级创建的层叠上下文内生效 - 不要依赖“没写
z-index就等于没层级变化”——position: relative本身已是层级分水岭
relative 不偏移却覆盖其他元素的典型场景
这不是 bug，是规范行为。relative 元素即使 top: 0; left: 0，只要脱离了 static 状态，就在层叠顺序中获得了更高优先级。浏览器按如下顺序决定谁在上：
- 背景和边框（
static元素） - 普通流中的块级/行内内容（
static） - 定位元素（
relative、absolute、fixed），按 DOM 顺序和z-index排序
所以，如果你有一个按钮和一段文字并排，给按钮加了 position: relative，哪怕什么偏移都没写，它也会盖住后面的文字——尤其当文字是 static 且没设 z-index 时。
使用场景提醒：
— 表单控件微调前先加 position: relative，结果下拉选项被盖住
— 卡片内图标加 position: relative 为后续 absolute 气泡做准备，却意外遮挡了卡片标题
— 所有这类问题，根源都不是“动了位置”，而是“变了定位状态”
为什么不能靠 visibility 或 opacity 来绕过这个层级提升
visibility: hidden 和 opacity: 0 都不会取消元素的定位状态，也不会让它退回 static 层叠层级。它们只影响渲染可见性，不改变层叠上下文归属。
-
visibility: hidden：元素仍占位、仍参与层叠排序，只是不可见 -
opacity: 0：元素仍可点击（除非加pointer-events: none），仍保有其定位层级 - 真正想“退回到 static 层级”，唯一办法是删掉
position: relative，或改回position: static
性能提示：频繁切换 position: relative 可能触发重排（尤其是配合 top/left 时），而仅用 transform + z-index 不会——但注意，transform 本身也会创建新层叠上下文，这点常被忽略。
relative 元素的 z-index 在嵌套结构中最容易出问题的地方
最隐蔽的问题发生在多层 relative 嵌套中：z-index 不是全局数值比大小，而是按「层叠上下文树」逐级结算。一个 relative 父元素如果设了 z-index: 1，它内部所有子元素（无论 relative 还是 absolute）的 z-index 都只在这个父级创建的上下文中起作用。
- 父级
z-index: 1+ 子级z-index: 999，仍可能被外部z-index: 2的兄弟元素盖住 - 父级没设
z-index（即z-index: auto），则子级z-index直接提升到上一级上下文比较 - 检查是否意外创建了新层叠上下文：
transform、filter、opacity 、will-change都会隐式触发，导致 relative 子元素的z-index被“截断”在错误层级
真正容易被忽略的，是那些没写任何偏移、也没设 z-index，却只因加了一行 position: relative 就悄悄改变了视觉层叠关系的元素——它们不会报错，也不会在控制台提示，只在交互动态展开或响应式切换时突然暴露遮挡问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
