【学习笔记】CSS深入理解之z-index

张鑫旭的CSS深入理解之z-index学习笔记

层叠上下文

什么是层叠上下文?
在z轴上延伸出一个层级,离父级层叠上下文的顶部更近。

如何产生层叠上下文?

  • 根元素具有根层叠上下文
  • z-index不为"auto"的定位元素
  • 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
  • opacity 属性值小于 1 的元素,
  • transform 属性值不为 "none"的元素,
  • mix-blend-mode 属性值不为 "normal"的元素,
  • filter值不为“none”的元素,
  • perspective值不为“none”的元素,
  • isolation 属性被设置为 "isolate"的元素,
  • position: fixed(Chrome等webkit内核浏览器)
  • will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值(参考 这篇文章
  • -webkit-overflow-scrolling 属性被设置 "touch"的元素

什么是层叠水平?
层叠上下文中的每个元素都有一个层叠水平,决定同一个层叠上下文中的元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠原则。

层叠顺序

一个层叠上下文内,元素发生层叠时候有着特定的垂直显示顺序,也就是下图显示的层叠规则

【学习笔记】CSS深入理解之z-index

  • 层叠上下文的background/border(装饰层)
  • 负z-index的依赖z-index层叠上下文元素
  • 块状盒子(布局)
  • float浮动盒子(布局)
  • inline/inline-block水平盒子(内容)
  • z-index为auto/z-index为0的依赖z-index层叠上下文元素或不依赖z-index的层叠上下文
  • 正z-index的依赖z-index层叠上下文元素

关于“依赖z-index的层叠上下文”
创建层叠上下文的方式前文已列出,定位元素以及父元素为flex定位的元素,必须依赖z-index值才能创建层叠上下位,所以统称为依赖z-index的层叠上下文元素。而其他属性即不依赖z-index的层叠上下文。

z-index和层叠上下文

  • 默认z-index: auto相当于是z-index: 0但不会产生层叠上下文
  • z-index只对依赖z-index的层叠上下文元素起作用
  • z-index不为auto的定位元素会创建层叠上下文
  • z-index层叠顺序的比较止步于父级层叠上下文

https://codepen.io/curlywater...
第一组,蓝色盒子设置opacity:0.8;z-index:2,红色盒子设置transform,证明z-index对不依赖z-index的层叠上下文元素无效
第二组,蓝色盒子relative,红色盒子flex的子元素,两者都未设置z-index,未产生层叠上下文,红色盒子父级为块状盒子,蓝色盒子为z-inedx为auto的层叠上下文元素
第三组,蓝色盒子relative,红色盒子flex的子元素,两者都z-index: 0,产生层叠上下文,后来居上

z-index实践经验

  • 非浮层元素避免设置z-index值(可以通过更改DOM顺序,创建层叠上下文来代替),z-index值不需要超过2
  • 使用负z-index实现可访问性隐藏

相关推荐