css – 什么有更大的优先级:opacity或z-index在浏览器?

前端之家收集整理的这篇文章主要介绍了css – 什么有更大的优先级:opacity或z-index在浏览器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在JavaScript中编写一个“弹出窗口”,我遇到了一个有趣的事情:

在弹出窗口下的海军广场是可见的,即使我希望它被隐藏。弹出框是在广场之后添加的,所以它应该在顶部。

海军方的CSS不透明性为0.3。从我试过的,似乎每个数字从区间(0,1)将产生相同的结果。如果我将其更改为1,那么它的行为正如预期(即,弹出窗口下方的部分被隐藏)。

我试图将z-index属性设置为10为正方形和100为弹出窗口,但它不会改变任何东西。

我缺少什么?为什么是方形的一部分显示

测试的浏览器:

> Firefox 3.6.x
> Chrome 4

解决方法

这不是一个错误,实际上是它应该工作。这有点混乱,因为 elaborate description of Stacking Contexts没有提到任何事情。然而, visual formatting module链接color module可以找到这个特别的秘密(强调我):

Since an element with opacity less than 1 is composited from a single
offscreen image,content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1. If an element with opacity less than 1 is not positioned,implementations must paint the layer it creates,within its parent stacking context,at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned,the ‘z-index’ property applies as described in [CSS21],except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements,since SVG has its own rendering model ([SVG11],Chapter 3).

原文链接:https://www.f2er.com/css/220499.html

猜你在找的CSS相关文章