在弹出窗口下的海军广场是可见的,即使我希望它被隐藏。弹出框是在广场之后添加的,所以它应该在顶部。
海军方的CSS不透明性为0.3。从我试过的,似乎每个数字从区间(0,1)将产生相同的结果。如果我将其更改为1,那么它的行为正如预期(即,弹出窗口下方的部分被隐藏)。
我试图将z-index属性设置为10为正方形和100为弹出窗口,但它不会改变任何东西。
我缺少什么?为什么是方形的一部分显示?
测试的浏览器:
> Firefox 3.6.x
> Chrome 4
解决方法
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).