css中的opacity和z-index对于stacking context的影响

今天偶尔看到了一篇文章讲z-index的, 有一些新的收获吧, 记录一下.

他给了一个例子:

<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>
.red, .green, .blue {
  position: absolute;
}
.red {
  background: red;
  z-index: 1;
}
.green {
  background: green;
}
.blue {
  background: blue;
}

显示结果:

css中的opacity和z-index对于stacking context的影响

现在要求把红色的放在最下面,但是不能改变html的顺序,也不能改变zindex和position.

解决方案放在最后.

决定元素在界面上显示前后顺序(z轴方向)的有

  1. 正常情况是按照html元素的书写顺序 (子节点元素会显示在父节点上面)
  2. 有定位(除了static)的元素显示在没有定位的前面
  3. zindex大的显示在小的前面

但是在设置的时候还需要根据stacking context来做第一层的判断,

其实一种情况就是: 如果父节点1的zindex小于父节点2的zindex, 那么父节点1的子元素即使设置很高的zindex也不可能显示在父节点2的前面.

然后以下情况会产生stacking context:

  1. 根元素 <html>
  2. 定位元素(除了static)和zIndex
  3. 小于1opacity (CSS3中新加入的)

这篇文章主要讲的就是opacity对于stacking context的影响.

个人理解: opacity对于stacking context 和 zindex类似, 例如 opacity:0.99 和 opacity: 1;的区别就类似于 zindex: 0.99和1的区别.

所以其实决定元素在界面上显示前后顺序(z轴方向)的因素需要加一个, 就是opacity

所以文章给的解决方案是这样的

 1 div:first-child { opacity: .99; } 

就是调低了红元素的父元素的stacking context

在读的过程中又看到了其它的一些知识, 关于painting order的, 其实上述内容都只是painting order的一部分. 有机会再总结一下.

---------------------------------------------

又查到了一些资料:

opacity小于1的情况:

  1. 如果元素没有定位, 则相当于把元素设置了定位,并且zindex是0;
  2. 如果元素有定位又分为两种: 1. 元素有zindex就按照zindex渲染 2. 元素没有zindex,就按照正常的定位来渲染

原文:

If an element with opacity less than 1 is not positioned, then it is painted on the same layer, within its parent stacking context, as positioned elements with stack level 0. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that if the used value is ‘auto’ then the element behaves exactly as if it were ‘0

参考资料:

[What No One Told You About Z-Index]

[W3 - Layered presentation]

[W3 - Stacking Contexts]

[W3 - Opacity]

相关推荐