首先了解堆叠顺序
可以看出，从下往上。首先以 z-index 为准，顺序是
z:负 < z:auto/0 < z:正
pos: 绝对/相对定位元素处于 z: auto/0 级别
然后，块级 < 浮动 < 内联/文字，整体处于 z:负与 z:0 中间
最后，background < border 是最底层
关于 z-index, 记住两条规则：
- 有用的 z-index 与没用的 z-index : z-index 只对定位元素 (pos:a/r/f ) 有效
- 定位元素不写 z-index 默认为 auto 层
然后了解堆叠上下文
当一个元素满足某种条件时，就说它“产生堆叠上下文”。一般来说常见条件是
pos: absolute/relative且z-index≠autopos: fixedopatcity: <1
堆叠上下文这个概念会影响什么？
一个元素被声明为堆叠上下文后，该元素及其内部所有子元素就形成了一个部门，这个部门的堆叠等级以父元素为准，其内部子元素的 z-index 即使到了9999，仍不能超出部门之外。可以想象成：父元素所在堆叠位置点上扩展出一个区间，这个区间限制了子元素的活动范围。
比如元素 a 有子元素 a1,元素 b 有子元素 b1，a 和 b 都是堆叠上下文且 a > b，那么 b1 的 z-index 无论 > a1 多少，都不可能在 a1 之上
比如元素 a 不是堆叠上下文，子元素 a1 的 z-index < 0，那么 a1 在 a 的背景之下，如把 a 变成堆叠上下文，a 处于 z-index: 0 层，那么 a1 在 a 的背景之上
当你发现两个元素，无论后者的z-index如何小于前者，都不能使前者覆盖在后者之上，很可能是堆叠上下文的锅
一句话解释这种现象就是：小部门的顶级员工地位低于大部门的底层员工
为什么 z-index 不听话？
你需要检查——
- 是不是 z-index 声明的元素没有
position: absolute，也没有position: relative - 是不是 z-index 声明元素的父级元素，形成了堆叠上下文从而限制了元素的位置
总结
- 块级 < 浮动 < 内联 < 定位
- 长江后浪推前浪：后面的兄弟盖住前面的
- 十级斗皇打不过一级斗尊：靠后的堆叠上下文内部的孩子不会盖住靠前的堆叠上下文内部的孩子
- z-index 只有写在定位元素上才有用
暂无评论