CSS层叠概念 层叠上下文 可以想象一张桌子，上面有一堆物品，这张桌子就代表着一个层叠上下文。 如果在第一张桌子旁还有第二张桌子，那第二张桌子就代表着另一个层叠上下文; 现在想象在第一张桌子上有四个小方块，他们都直接放在桌子上。 在这四个小方块之上有一片玻璃，而在玻璃片上有一盘水果。 这些方块、玻璃片、水果盘， 各自都代表着层叠上下文中一个不同的层叠层，而这个层叠上下文就是桌子 形成层叠上下文的条件： 根元素 <html></html> position值为 absolute|relative，且 z-index值不为 auto position 值为 fixed|sticky z-index 值不为 auto 的flex元素，即：父元素 display:flex|inline-flex opacity 属性值小于 1 的元素 transform 属性值不为 none的元素 mix-blend-mode 属性值不为 normal 的元素 filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path 值不为 none 的元素 perspective 值不为 none 的元素 isolation 属性被设置为 isolate 的元素 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值 -webkit-overflow-scrolling 属性被设置 touch的元素 层叠等级 决定了同一个层叠上下文中元素在z轴上的显示顺序 层叠等级不一定由Z-index决定,只有定位元素的层叠等级才由 z-index 决定 Z-index 元素的 z-index 值只在同一个层叠上下文中有意义 层叠顺序 背景和边框：形成层叠上下文的元素的背景和边框。 负z-index值：层叠上下文内有着负z-index值的定位子元素，负的越大层叠等级越低； 块级盒：文档流中块级、非定位子元素； 浮动盒：非定位浮动元素； 行内盒：文档流中行内、非定位子元素； z-index: 0：z-index为0或auto的定位元素， 这些元素形成了新的层叠上下文； 正z-index值：z-index 为正的定位元素，正的越大层叠等级越高