Question

我有一个弹出z-index为100的“Dialog”小部件。当我创建另一个弹出窗口（浮动div）时，它出现在对话框小部件下面，因为我没有明确设置z -index在新的弹出窗口。

结构最终看起来像

<div id="dialogbox" style="z-index: 100">
    <div>
        <div id="widgetThatCausesThePopup" />
    </div>
</div>
<div id="popupHiddenBehindTheDialog" />

我正在使用GWT生成此HTML。对话框和widgetThatCausesThePopup之间可以有任意级别的嵌套，实际的z-index也可以是任意的。

如何确保新div显示在对话框前面？

Answer 1

如果您的新对话框窗口已插入<<>>之后的 ：

您可以在所有对话框窗口中设置z-index: 100。当找到具有相同z-index的元素时，DOM中的顺序将确定哪个元素位于顶部。

Answer 2

获取父级的计算z-index（参见In GWT how to know all the styles applied to a given element (by id or class name)）并为每个孩子递增。

Answer 3

自然的CSS解决方案是：

确保“对话框”获得堆叠上下文。这可以通过
- 将z-index设置为auto以外的其他内容，
- 以及position relative，absolute或fixed。
然后将您的弹出窗口作为子项添加到“dialogbox”。如果还没有，你可以随时在DOM中移动它。

在这种情况下，您的弹出窗口根本不需要z-index。这完全避免了“z-index地狱”。

示例：

<!doctype html>
<html>
<head>
<style type="text/css">
    #dialogbox {
        width: 400px; height: 300px;
        top: 0; left: 0;
        background-color: red;
    }
    #popup {
        width: 500px; height: 200px;
        top: 0; left: 0;
        background-color: green;
    }
</style>
</head>

<body>
<div id="dialogbox" style="z-index: 100; position: absolute;">
    <div>
        <div id="widgetThatCausesThePopup" >
            <button>Show popup</button>
        </div>
    </div>
    <div id="popup" style="position: absolute;">
        <!-- Empty divs cause really weird problems. 
             Always make sure, that your divs aren't empty! -->
        &nbsp;
    </div>
</div>
</body>
</html>

如果需要，堆栈上下文甚至允许您使用相对于上下文的z索引（请注意，子顺序无关紧要，并且z索引不必大于100）：

<div id="dialogbox" style="z-index: 100; position: absolute;">
    <div id="popup" style="position: absolute; z-index: 2;">
        <!-- Empty divs cause really weird problems. 
             Always make sure, that your divs aren't empty! -->
        &nbsp;
    </div>
    <div>
        <div id="widgetThatCausesThePopup" style="position: absolute; z-index: 1;">
            <button>Show popup</button>
        </div>
    </div>
</div>

相对z指数？

3 个答案: