带有子元素的css z索引问题_Css_Z Index

带有子元素的css z索引问题

css

带有子元素的css z索引问题,css,z-index,Css,Z Index,我的问题和这个差不多：但我不能使用他的解决方案。我必须把每件事都安排得有目共睹。假设我有以下代码： <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-colo

我的问题和这个差不多：

但我不能使用他的解决方案。我必须把每件事都安排得有目共睹。假设我有以下代码：

<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>


一些信息
测试1
测试2

我的意见是，面具div在身体上方，父div在身体上方。在父div中有一个子div，它覆盖着面具和他的父div，当然还有身体。面具、父母和孩子都是位置：固定的，身体是相对的。嗯，我只是不能设置它们，无论我改变它们的位置类型或z-指数。只有当我没有设置父项的z索引时，子项才会正确地位于掩码上方，但如果没有设置，则它们都位于掩码后面。

为了使z索引生效，必须定位元素。还可以降低掩码的z索引，并增加test1的

z索引。我还建议不要内联样式，不过我怀疑这可能就是示例
<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>


测试1
测试2

工作示例：
@ferdinandfly检查我的更新，它建议在掩码和test1Thanks上大量更改z索引，但它不起作用。内联样式不是我想要的，它只是一个示例。我需要测试1前面的掩码，但是在测试2后面。所以掩码、父项和子项的顺序必须是：2、1、3。你不能在标记中将test1
和test2
分开，使它们成为兄弟吗？事实上，如果我不设置父项的z索引，它会起作用，但我需要父项在主体前面，所以我不能将父项z索引设置为无效。不，我不能将它们分开，事实上，我的想法是：我有一个复杂的浮动条，在浮动条中，我有一些按钮，当我点击按钮时，我有一个选项卡显示在中。此时，我需要屏蔽除原始按钮外的所有其他按钮。所以，你看，我无法将它们分开。我将掩码、父项、子项设置为相同的位置类型：相对、绝对、固定。当它们都是绝对的时候，它们就起作用了，但是当它们都是固定的或相对的时候，不，即使是绝对的，它们也不起作用。我简直不敢相信这个问题。所有人都说z-index很容易理解，但为什么我不能让这个简单的例子起作用呢。