Question

我几乎遇到与此问题相同的问题：

但我无法使用他的解决方案。我必须把每一件事都看成是可见的。假设我有这个代码：

<body>
    some information
    <div style="position:fixed;width:100%;height:100%;background-color:green;z-index: 2;opacity: 0.7"></div>
    <div style='z-index:1;background-color:white;position:fixed'>
        test1
        <div style='z-index:3;background-color:red'>
            test2
        </div>

    </div>      
</body>

我的观点是掩码div在身体上，而父div。父母div在身体上。在父div中有一个儿童div，它超过了面具而他的父母和当然是身体。面具，父母和孩子都是位置：固定，身体是相对的。好吧，我无论如何改变你的位置类型或z-index都无法设置它们。只有当我没有设置父级的z-index时，子项才会正确地覆盖掩码，但如果不是，则它们都在掩码后面。

Answer 1

为了使z-index生效，必须定位元素。同时降低掩码的z-index并增加test1的z-index。我还建议不要内联样式，但我怀疑这可能是为了这个例子。

<div style="position:fixed;width:100%;height:100%;background-color:green;z-index: 1;opacity: 0.7"></div>
<div style='z-index:2;background-color:white;position:fixed'>
    test1
    <div style='z-index:3;background-color:red; position:relative;'>
        test2
    </div>

</div>

工作示例：http://jsfiddle.net/vQz6P/

与子元素的css z-index问题

1 个答案: