阅读 68

CSS堆叠上下文

前言:设置了z-index:9999;的层叠顺序一定高于z-index:0;吗?很明显这句话在某些情况下是不成立的,而引起其不成立的原因就是堆叠上下文的现象。本文主要介绍关于css中堆叠上下文的概念、引起的原因等。 :友情链接:关于堆叠上下文的MDN介绍,张鑫旭的博客《深入理解CSS中的层叠上下文和层叠顺序》


1、什么是堆叠顺序

从最底层到最高层的顺序如下:

  1. 父级元素的background
  2. 父级元素的border
  3. 块级子元素
  4. 浮动元素
  5. 父元素的文字或内联子元素
  6. 定位元素z-index: 0
  7. 定位元素z-index: +

其中,负的z-index出现的位置有两种可能:

  • 父元素是position:static;时:负的z-index出现在0号位(即1.父元素的background的底下一层)
  • 因一些原因导致了层叠上下文现象出现时,负的z-index出现在2号位与3号位的中间,即只要出现了层叠上下文,子元素的z-index即使是负的,也会出现在父元素的上边。

普通情况下的层叠顺序示意图

2、层叠上下文出现的原因

  • 根元素 (HTML),
  • z-index 值不为 "auto"的 绝对/相对定位,
  • 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex,
  • opacity 属性值小于 1 的元素(参考 the specification for opacity),
  • transform 属性值不为 "none"的元素,
  • mix-blend-mode 属性值不为 "normal"的元素,
  • filter值不为“none”的元素,
  • perspective值不为“none”的元素,
  • isolation 属性被设置为 "isolate"的元素,
  • position: fixed
  • 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值(参考 这篇文章)
  • -webkit-overflow-scrolling 属性被设置 "touch"的元素

3、我对层叠上下文现象的理解

假设有两个部门,分别是【甲】和【乙】,【甲】在前,【乙】在后,正常情况下,【甲】【乙】中的职员的地位由z-index决定,z-index相同的时候,【乙】中职员级别比【甲】高;而当出现了层叠上下文现象时,就相当甲、乙两个部门的负责的项目发生了变化,假如【甲】负责一个是千万级的项目,【乙】负责的是日常十万级别的项目,所以最终【甲】中的职员,哪怕在部门中的地位再低(即z-index:0),获得的薪酬也会比【乙】部门中的职员包括部门leader(即z-index:9999)要高。

4、一个例子

代码链接 js.jirengu.com/boyocekayo/… html结构

<div class='parent'>
  <div class="a relative">a
    <div class="a1">a1</div>
  </div>
  <div class="b relative">b
    <div class="b1">b1</div>
  </div>
</div>
复制代码

css样式

.parent{
  height: 200px;
  border: 10px solid rgba(255,0,0, 1);
  padding: 15px;
  margin: 12px;
  background: #000;
}

.relative{
  width: 100px;
  height: 100px;
  background: orange;
  position: relative;
  border: 1px solid red;
  
}

.a1,.b1{
  background: green;
  height:30px;
  position: relative;
}
.a1{
  z-index:999;
    margin-top:0px;
}
.b1{
  background: blue;
  margin-top: -80px;
  z-index: 0;
}
/*下列代码导致层叠上下文现象*/
.a{
  position: relative;
  z-index: 1;
}
.b{
  position: relative;
  z-index: 1;
}


复制代码

正常情况下,绿色的a1的z-index比蓝色的b1高,所以a1能盖住b1

出现了层叠上下文后,即使a1的z-index:9999;,b1z-index:0;,蓝色的b1还是还是盖住了绿色的a1。

文章分类
前端
文章标签