前置知识:
(1)所有的盒模型元素都处于三维坐标系中。 除了常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, 当它们相互覆盖时, z轴层叠顺序就变得十分重要。
(2)z-index只对定位元素有作用。
1、默认层叠顺序(7阶层叠水平)
由底层到外层依次时
(1) 根元素的background和border
(2) z-index为负
(3) block块状盒子
(4) float浮动元素
(5) inline/inline-block水平盒子
(6) z-index为auto/0,或不依赖于z-index的层叠上下文(即定位元素没有指定z-index的时候,默认在此层渲染。)
(7) z-index 为正
![](https://img.haomeiwen.com/i8141643/242f245aa1b01f5a.png)
2、层叠上下文(与块级格式化上下文BFC性质相似)
注:层叠上下文可以使底层元素上升到与相邻上层元素同级,然后再根据后来者居上原则。(层递上下文的使用必须是相邻的两层,隔层无法比较)。
2.1 下面这两个是层叠领域的黄金准则。当元素发生层叠的时候,其覆盖关系遵循下面2个准则:
谁大谁上:当具有明显的层叠水平标示(不在同一级别上)的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。
转载自:https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
2.2 层叠上下文的触发方式:
(1)根元素 (HTML)
(2)z-index 值不为 "auto"的 绝对/相对定位
(3)一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex。(需满足两个条件才能触发:1是父级需要是display:flex或者display:inline-flex水平,2是子元素的z-index不是auto,必须是数值。则这个子元素为层叠上下文元素)
(4)opacity 属性值小于 1 的元素(参考 the specification for opacity)
(5)transform 属性值不为 "none"的元素
(6)mix-blend-mode 属性值不为 "normal"的元素
(7)filter值不为“none”的元素
(8)perspective值不为“none”的元素
(9)position: fixed
(10)isolation 属性被设置为 "isolate"的元素
(11)在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
(12)-webkit-overflow-scrolling 属性被设置 "touch"的元素
参考:https://www.cnblogs.com/CCCLARITY/p/8290403.html
https://segmentfault.com/a/1190000007051005
网友评论