相对z-index？答案

【问题标题】：Relative z-index?相对z-index？
【发布时间】：2011-04-13 02:32:32
【问题描述】：

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

结构最终看起来像

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

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

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

【问题讨论】：

给它一个更高的 z-index 怎么样？ :D
当然，我很想做z-index: {z-index-of-parent + 1} 之类的事情，但由于父级没有 z-index 集，我不知道如何找到要击败的索引！跨度>
每次添加弹出窗口时，都可以增加一个变量。然后，使用 JavaScript 将最近弹出的 z-index 更改为 100+inc。不过我不知道是否有 CSS 解决方案...
不，我认为没有 CSS 解决方案 - 这绝对是动态情况。不过，我希望我可以从 DOM 中确定要使用的 z-index，而不必自己管理增量变量。好主意，不过 - 如果我无法从 DOM 中读取它，我会退回到它。

标签： html css gwt layout z-index

【解决方案1】：

如果您的新对话框窗口插入到 DOM 中在之前的窗口之后：

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

【讨论】：

感谢您的提示。不幸的是，这只适用于已知的 z-index（我意识到我写的问题很糟糕，并且不强调 z-index 的可变性，抱歉）。
好的，我明白了。您对第一个对话框的 z-index 有近似的想法吗？您可以在该数字上添加几个零，并将其设置为您添加的对话框的 z-index。 Z-index 值可以很高并且仍然有效：puidokas.com/max-z-index.

【解决方案2】：

自然的 CSS 解决方案是：

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

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

例子：

<!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-indexes（注意，子顺序无关紧要，z-indexes 不必大于 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>

【讨论】：

【解决方案3】：

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

【讨论】：