第7章 层叠规则

z-index

z-index属性只有和定位元素在一起时才会起作用,可以是正数或负数。

层叠上下文和层叠水平

理解元素的层叠顺序(从上至下)

  1. 装饰)正z-index,位置在最下面,特指层叠上下文元素的边框和背景色
  2. z-index:auto或看成z-index:0,层叠水平一样
  3. 内容inline水平盒子,指的是包括inline/inline-block/inline-table元素的层叠顺序,都是同等级别
  4. 布局float浮动盒子
  5. 布局block块状水平盒子
  6. z-index
  7. 层叠上下文background/border

牢记层叠准则

层叠领域的黄金准则。当元素发生层叠时,其覆盖关系遵循下面两条准则:

  1. 谁大谁上:层叠水平值大的在上面;
  2. 后来居上:当元素的层叠水平一致、层叠顺序相同时,处于后面的元素会覆盖前面的元素。

深入了解层叠上下文

特性

层叠上下文元素有如下特性:

创建

1. 根层叠上下文

根层叠上下文指的是页面根元素html

2. 定位元素和传统层叠上下文

对于position值为relative/absolute以及Firefox/IE浏览器下含有position:fixed声明的定位元素,当其z-index值不是auto时,会创建层叠上下文。

z-index:auto时,遵循黄金准则的第一条谁大谁上;当z-index为具体数值时,按照父级的大小进行层叠排列;当z-index为具体数值,且父级层叠水平/顺序一致,遵循后来居上

3. CSS3层叠上下文

  1. 元素为flex布局元素(父元素display:flex|inline-flex),同时z-index值不是auto
  2. 元素的opacity值不是1
  3. 元素的transform值不是none
  4. 元素的filter值不是none

层叠上下文与层叠顺序

  1. 如果层叠上下文不依赖z-index数值,则其层叠顺序是z-index:auto,可以看成z-index:0级别;
  2. 如果层叠上下文元素依赖z-index数值,则其层叠顺序由z-index值决定。

元素成为定位元素,其z-index就会自动生效,此时其z-index默认是auto,也就是0级别,根据层叠顺序表,就会覆盖inline/block/float元素。不支持z-index的层叠上下文元素天然是z-index:auto级别,层叠上下文元素和定位元素是一个层叠顺序,当发生层叠时遵循后来居上准则。

z-index负值深入理解

z-index负值具体作用:

  1. 可访问性隐藏z-index负值可以隐藏元素,只需要层叠上下文内的某一个父元素加背景色即可。优势如下
  2. IE8下的多背景模拟

     .box {
     background-image: url("1.jpg");
     position: relative;
     z-index: 0;
     }
    
     .box:before,
     .box:after {
     content: '';
     position: absolute;
     z-index: -1;
     }
    
     .box:before {
     background-image: url("2.jpg");
     }
    
     .box:after {
     background-image: url("3.jpg");
     }
    
  3. 定位在元素的后面

z-index准则

对于非浮层元素,避免设置z-index值,z-index值不需要超过2

.box {
background-image: url("1.jpg");
position: relative;
z-index: 0;
}

.box:before,
.box:after {
content: '';
position: absolute;
z-index: -1;
}

.box:before {
background-image: url("2.jpg");
}

.box:after {
background-image: url("3.jpg");
}