关于堆叠上下文, 有哪些了解?
2020-05-13 本文已影响0人
风雅欢乐
堆叠上下文(stack context), 它是一块区域, 这块区域由某个元素创建, 它规定了该区域中的内容在Z轴上排列的先后顺序.
会创建堆叠上下文的元素
- 根元素
- 设置了z-index(即非auto)数值的定位元素
同一个堆叠上下文中, 元素在Z轴上的排列顺序
从后往前依次是:
- 创建该堆叠上下文的元素的背景和边框
- 堆叠级别(z-index)为负值的堆叠上下文
- 常规流非定位的块盒
- 非定位的浮动盒子
- 常规流非定位行盒
- 任何z-index是auto的定位子元素, 以及z-index是0的堆叠上下文
- 堆叠级别为正值的堆叠上下文
