【HTML】z-index大的元素一定在小的上面吗？

思考以下两个问题

1. z-index值大的元素一定在值小的上面吗？

• 不一定，因为这个数值大小只在当前的层叠上下文中才有意义
• 比如父元素设置9999，子元素设置z-index为1，但是子元素还是在父元素上面，因为子元素如何设置都会在这个层叠上下文根元素之上

2. 如何实现父元素覆盖子元素？

• 子元素的z-index设置为负数
• 利用块级元素 在 z-index < 0 元素之上的规则则可实现

---

先了解一下前置知识

z-index

• 需要配合定位属性一起，即指定position属性的元素，非默认static

层叠上下文

层叠等级（自下到上）：

1. 层叠上下文根元素
2. 定位元素 且 z-index < 0
3. 块级元素
4. 浮动元素和文字
5. 定位元素 且 z-index为auto 或 ＝ 0
6. 定位元素 且 z-index > 0

• 当多个层叠等级相同的元素重叠时，按照HTML中出现的顺序决定堆叠上下关系，后来者居上;