文: jack同学
jack同学
- 堆叠上下文：是一个区域，这个
- 哪些元素创建了堆叠上下文？
- html元素
- 设置了z-index为非auto的定位元素
- 注意点：堆叠上下文不一定是定位元素，只要没有设置z-index值的和设置为auto的都不会创建堆叠上下文
- 同一个堆叠上下文中，页面Z轴方向上元素排列顺序（以下从离用户最近的元素至最远的元素）
- z-index为正值的堆叠上下文
- 所有z-index为auto的定位元素，以及z-index为0的堆叠上下文
- 常规流非定位行盒（行内元素）
- 浮动元素
- 常规流非定位块盒（块级元素）
- z-index为负值的堆叠上下文
- 创建堆叠上下文元素的背景和边框
- 多个堆叠上下文的排列顺序如何呢？
- 根据元素结构和创建顺序来判断。
- 离用户最远的当然是HTML元素了
- 然后是堆叠上下文
- 再然后是堆叠上下文子级中的堆叠上下文
- 如果是同级堆叠上下文，则根据结构顺序来覆盖，后面的覆盖前面的
