CSS深入理解之z-index 笔记

z-index 与 css 定位属性

z-index 只对定位元素有作用。

{position:relative;z-index:2;}
{position:absolute;z-index:2;}
{position:fixed;z-index:2;}
{position:sticky;z-index:2;}

如果定位元素z-index没有发生嵌套：

后来居上；
哪个值大哪个在上；

如果定位元素z-index发生嵌套：

以祖先元素为标准(z-index不为auto)

css 中的层叠上下文和层叠等级

层叠上下文是HTML元素中的一个三维概念，表示元素在z轴上距离人眼更近。

具有层叠上下文的元素：

页面根元素天生具有层叠上下文，称为“根层叠上下文”。
z-index 值为数值的定位元素具有层叠上下文。
其它属性

层叠上下文中的每个元素都有一个层叠等级，决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁值大谁在上”的层叠准则。

层叠等级(stacking level) 和 z-index 不是一个东西。普通元素也有层叠等级。

层叠等级是放在同一个层叠上下文中来进行比较的，不在同一个层叠上下文中没有意义。

层叠上下文的特性

层叠上下文可以嵌套，组合成一个分层次的层叠上下文。
每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染时，只影响后代元素。
每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

层叠顺序

层叠顺序表示元素发生层叠时特定的垂直显示顺序。

7阶层叠等级(stacking level)

层叠等级的比较要在同一个层叠上下文中

看下面的例子：

.inline-block{
  display:inline-block;
  background:olive;
  margin:-30px;
}
.block{
  display:block;
  background:green;
}

z-index 与层叠上下文

定位元素默认z-index:auto可以看成是z-index:0；

为何定位元素会覆盖普通元素？

定位元素默认z-index:auto，根据层叠顺序表z-index:auto是大于inline/inline-block的，所以定位后，就会覆盖普通元素。

z-index 不为 auto 的定位元素会创建层叠上下文；

从层叠顺序上讲，z-index:auto可以看成是z-index:0；
但从层叠上下文来讲，z-index:auto不会产生层叠上下文，z-index:0则会产生层叠上下文。

z-index 层叠顺序的比较止步于父级层叠上下文；

其它具有层叠上下文的css属性

z-index 值不为 auto 的子 flex 项(父元素display:flex|inline-flex)。

<div class="box">
  <div class="d1">
    <div class="d2"></div>
  </div>
</div>

.box{
  margin:100px;background:blue;
  display:flex;
}
.d1{z-index:1;} /*这里的值不是auto，所以父元素添加flex后才有了层叠上下文*/
.d2{
  width:100px;height:100px;background:green;
  position:relative;top:-20px;left:-20px;
  z-index:-1;
}

元素的 opacity 值不是1。

<div class="box">
  <div class="d1"></div>
</div>

.box{
  margin:100px;background:blue;
  opacity:0.5; /*opacity不为1产生层叠上下文*/
}
.d1{
  width:100px;height:100px;background:green;
  position:relative;top:-20px;left:-20px;
  z-index:-1;
}

元素的 transform 值不是none。

<div class="box">
  <div class="d1"></div>
</div>

.box{
  margin:100px;background:blue;
  transform:rotate(15deg); /*任意非none值*/
}
.d1{
  width:100px;height:100px;background:green;
  position:relative;top:-20px;left:-20px;
  z-index:-1;
}