z-index

[Akiq2016]

Z-INDEX

1. z-index只对指定了position属性为非static的元素有效
2. 没有指定z-index时，所有元素默认渲染在同一层(0层)，布局顺序：
   • 块级元素（在最下层）
   • 浮动元素
   • 行内元素（在最上层）
3. 同一层内z-index相同时，按照以下规则进行布局：
   • 定位元素（position值为非static）：这些元素只按照其HTML结构中出现的顺序堆叠。
   • 非定位元素（position值为static）：始终先于定位元素渲染，并出现在定位元素的下层。

CONCLUSION

1. Background and borders: 形成层叠上下文的元素的背景和边框。层叠上下文中的最低等级。
2. Negative Z-Index: 层叠上下文内有着负z-index值的子元素。
3. Block Level Boxes: 文档流中非行内|非定位子元素。
4. Floated Boxes: 非定位浮动元素。
5. Inline Boxes: 文档流中行内级别非定位子元素。
6. Z-index: 0: 定位元素。 这些元素形成了新的层叠上下文。
7. Positive Z-index: 定位元素。 层叠上下文中的最高等级。

DEMO

学习资料

MDN - z-index
What You May Not Know About the Z-Index Property