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

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

他给了一个例子:

1 <div>
2   <span class="red">Red</span>
3 </div>
4 <div>
5   <span class="green">Green</span>
6 </div>
7 <div>
8   <span class="blue">Blue</span>
9 </div>
 1 .red, .green, .blue {
 2   position: absolute;
 3 }
 4 .red {
 5   background: red;
 6   z-index: 1;
 7 }
 8 .green {
 9   background: green;
10 }
11 .blue {
12   background: blue;
13 }

显示结果:

现在要求把红色的放在最下面,但是不能改变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]

原文地址:https://www.cnblogs.com/Liu-3/p/12084023.html

时间: 2024-11-01 16:16:45

css中的opacity和z-index对于stacking context的影响的相关文章

[未解决]在HTML+CSS中 设置opacity后float无效的问题

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Document</title> 5 <style type="text/css"> 6 #a1 { 7 width: 100px; 8 height: 100px; 9 border: 1px solid blue; 10 float: left; 11 background-color: white; 12 } 13 #a

CSS中的opacity,不透明度的坑

opacity的用法示例如下 /* 值是0到1之间的数值 */ opacity:0.5 opacity设置在元素上的时候,会出现什么效果? 答曰:如果不设置opacity的话,会显示效果为A(可以理解为一个图片),将A按照opacity设置的不透明度,就是得到的最终效果B.效果之间从最内侧开始推. 举例: 1 <div class="box1"> 2 <div class="con1"> 3 我是文字 4 </div> 5 <

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

CSS中的层叠上下文和层叠顺序

copy @ from http://www.zhangxinxu.com 四.务必牢记的层叠准则 下面这两个是层叠领域的黄金准则.当元素发生层叠的时候,其覆盖关系遵循下面2个准则: 谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个.通俗讲就是官大的压死官小的. 后来居上:当元素的层叠水平一致.层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素. 在CSS和HTML领域,只要元素发生了重叠,都离不开上面这两个

[转]深入理解CSS中的层叠上下文和层叠顺序

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显

深入理解CSS中的层叠上下文和层叠顺序

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什

深入理解css中position属性及z-index属性

深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute.最后将会介绍和position属性密切相关的z-index属性. 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到t

【拼爹坑爹不比爹】深入理解css中position属性及z-index属性

总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.)2,单一父元素不设值,子z-index才奏效:"不比爹"3,多个父元素,"拼爹坑爹"(子凭父贵,子贵父不贵)(爹设值,因外有body)4,多个父元素多子元素,各父各子高低相互比,就是不比爹:>< [转]深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要

css中zoom:1以及z-index的作用

一.CSS中zoom:1的作用在做IE6.IE7.IE8浏览器兼容的时候,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:1.触发IE浏览器的haslayout2.解决IE下的浮动,margin重叠等一些问题. 二.z-index:auto|number; ◆auto遵从其父对象的定位 ◆number无单位的整数值.可为负数CSS样式,把z-index设置为999或很大,是什么意思?z-index是针对网页显示中的一个特殊属性.因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表