CSS--布局--层叠上下文

40 阅读1分钟

层叠上下文的产生

满足一些条件的HTML元素会在自身创建一个层叠上下文

  • html元素
    
  • 定位元素
    
  • 具有 opacity transform filter will-change z-index不等于auto的flex子项
    

层叠上下文内元素的上下排序规则

image.png

背景边框 -> 负z-index -> 块元素 -> 浮动元素 -> 内联/内联块元素 -> z-index是0/auto(定位元素) -> 正z-index

层叠上下文里的子元素不会被放到层叠上下文元素的下面

元素处于不同层叠上下文(比如一些表亲元素):比较两个层叠上下文所在HTML元素的优先级