什么有更大的优先级：不透明或z-index在浏览器？ [英] What has bigger priority: opacity or z-index in browsers?
问题描述
我在JavaScript中编写了一个弹出窗口，我遇到了一个有趣的事情：
I'm coding a "popup window" in JavaScript and I've come across an interesting thing:
弹出窗口下的海军方格是可见的，即使我期望它被隐藏。
The navy square under the popup window is visible even though I would expect it to be hidden. The popup was added after the square, so it should be on the top.
CSS opacity 海军属性square是 0.3 。从我试过的，似乎每个数字从（0,1）将产生相同的结果。如果我将其更改为 1 ，那么它的行为与预期一致（即，弹出窗口下方的部分被隐藏）。
CSS opacity property of the navy square is 0.3. From what I've tried, it seems that every number from the interval (0,1) would yield the same result. If I change it to 1, then it behaves as expected (i.e. the part of the square under the popup is hidden).
我已尝试将 z-index 属性设置为 10 表示正方形， 100 表示弹出式窗口，但不会更改任何内容。
I've tried to set the z-index property to 10 for the square and 100 for the popup, but it doesn't change anything.
我错过了吗？为什么显示方形的一部分？
What am I missing? Why is part of square displayed?
测试的浏览器：
- Firefox 3.6。 x
- Chrome 4
推荐答案
一个错误，实际上是它应该如何工作。这有点令人困惑，因为精简的堆叠上下文描述没有提及任何内容。但是，视觉格式模块会链接到颜色模块，其中可以找到这个特殊的 （强调我的）：
This is not a bug and is actually how it's supposed to work. It's a bit confusing as the elaborate description of Stacking Contexts doesn't mention anything about it. However, the visual formatting module links to the color module where this particular gotcha can be found (emphasis mine):
由于不透明度小于1的元素是从单个
离屏图像合成的，因此其外部的内容不能以z顺序在b-b之间分层的内容。出于同样的原因，
实现必须为任何元素
创建一个新的堆叠上下文，不透明度小于1. 如果不透明度小于1的元素是
未定位，在父堆叠上下文中以相同的堆叠顺序绘制它创建的层，
将被使用，如果它是具有'z-index：0'和
的已定位元素：1'。如果定位了不透明度小于1的元素，
'z-index'属性应用如[CSS21]中所述，但将
'auto' '0'，因为一个新的堆栈上下文总是
创建。有关堆栈上下文的更多
信息，请参见[CSS21]的9.9节和附录E。因为SVG有自己的渲染模型（[SVG11]，
第3章）。本段中的规则不适用于SVG元素。
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).
这篇关于什么有更大的优先级：不透明或z-index在浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
