有一些新的收获吧
今天偶尔看到了一篇文章讲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轴标的目的)的有:
正常情况是凭据html元素的书写挨次 (子节点元素会显示在父节点上面)
有定位(除了static)的元素显示在没有定位的前面
zindex大的显示在小的前面
但是在设置的时候还需要按照stacking context来做第一层的判断,
其实一种情况就是: 如果父节点1的zindex小于父节点2的zindex, 那么父节点1的子元素即使设置很高的zindex也不成能显示在父节点2的前面.
然后以下情况会孕育产生stacking context:
根元素 <html>
定位元素(除了static)和zIndex
小于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的情况:
如果元素没有定位, 则相当于把元素设置了定位,并且zindex是0;
如果元素有定位又分为两种: 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 , 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 - Stacking Contexts]
css中的opacity和z-index对付stacking context的影响
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/33242.html
- 上一篇：已经多了webpack模块
- 下一篇：找到共享 2. 打开共享
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")