层叠上下文的产生
满足一些条件的HTML元素会在自身创建一个层叠上下文
-
根html元素 -
定位元素 -
具有 opacity transform filter will-change z-index不等于auto的flex子项
层叠上下文内元素的上下排序规则
背景边框 -> 负z-index -> 块元素 -> 浮动元素 -> 内联/内联块元素 -> z-index是0/auto(定位元素) -> 正z-index
层叠上下文里的子元素不会被放到层叠上下文元素的下面
元素处于不同层叠上下文(比如一些表亲元素):比较两个层叠上下文所在HTML元素的优先级