前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

你不知道的Z-Index

html/css
在下面的HTML我们写了3个<div>元素,然后每个<div>元素里面都有一个<span>元素,每个<span>元素都有个背景色,并且使用absolute定位,为了能更清楚地看到z-index的效果,我们写了一些其他的样式。第一个<span>元素的z-index值为1,其他两个没有设置。

代码如下:

<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

css如下:.red, .green, .blue {

  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}
 
.red {
  z-index: 1;
  top: 20px;
  left: 20px;
  background: red;
}
 
.green {
  top: 60px;
  left: 60px;
  background: green;
}
 
.blue {
  top: 100px;
  left: 100px;
  background: blue;
}

尝试把红色的<span>元素放到其他两个元素后面,但是必须遵守下面的规则:

  • 不能修改HTML的内容
  • 不能增加或修改任何元素的z-index属性
  • 不能增加或修改任何元素的position属性

想挑战一些的话,就去尝试一下吧。如果你不能做到,那就接着看下去。
解决方案很简单,你只需要给红色的<span>标签的父元素增加一个opacity小于1,像下面这样:
div:first-child {
 opacity: .99;

}

堆叠上下文

同一个父元素下面的元素会受父元素的堆叠顺序影响,所以堆叠上下文是我们理解z-index和堆叠顺序的关键。(下面为了简化,我们称堆叠上下文为层。)

每一个层都有唯一的根节点。当一个元素创建一个层,那么它的所有子元素都会受到父元素的堆叠顺序影响。意味着如果一个元素位于一个最低位置的层,那你z-index设置得再大,它也不会出现在其它层元素的上面。

现在我们来说说什么情况下会产生新的层:

  • 当一个元素位于HTML文档的最外层(<html>元素)
  • 当一个元素被定位了并且拥有一个z-index值(不为auto)
  • 当一个元素被设置了opacitytransformsfilterscss-regionspaged media等属性。

一二条规则,Web开发者都知道,虽然他们不一定知道怎么描述

最后一条,是很多非w3c规范里面的文章很少提到的。通常来讲,如果一个CSS属性需要做一些特效的话,它都会创建一个新的层。
影响堆叠顺序的因素有很多,我推荐你去看w3c规范,这篇文章我们主要探讨关于层的内容。

同一层里面的堆叠顺序

下面是同一层里面的堆叠顺序(从后到前):

  1. 层的根元素
  2. 被定位了得元素并且z-index值为负,相同z-index的情况下,按照HTML元素的书写顺序排列,下面相同。
  3. 没有被定位的元素
  4. 被定位的元素,并且z-index值为auto
  5. 被定位了的元素并且z-index值为正。

注意:z-index值为负的元素比较特殊,他们会先被绘制,意味着他们可以出现在其他元素的后面,甚至出现在它的父元素后面。但是必要条件是该元素必须与父元素处于同一层,并且父元素不是这个层的根元素。

总结

说了这么多,我们来给之前的代码加上堆叠顺序。

当我们设置了opacity之后变成下面这样。

红色的<span>从6变成1.1,我用’.’来标记它是新生成的层里面的第一个元素。

最后我们来总结一下为什么红色的<span>会去到下面:
一开始有两个层,一个由根节点产生,一个由设置了z-index:1并且position:absolute的红色<span>产生。当我们设置了opacity时,产生了第三个层,并且第三个层把红色<span>产生的层包裹了,意味着刚开始的z-index的作用域只在第三个层里面。而所有的<div>都没有定位或者z-index,所以他们的堆叠顺序按照HTML出现顺序排列,于是第三个层就去到下面。



转载请注明:前端录»你不知道的Z-Index