相对z指数？

我有一个弹出的Z-index为100的“对话框”窗口小部件。当我创建另一个弹出窗口（浮动窗格）时，它出现在对话窗口小部件下面，因为我没有明确地设置z-索引在新的弹出窗口中。相对z指数？

结构最终看起来像

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

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

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

来源

2011-04-11 Riley Lark

如何给它一个更高的z-index？：D – mingos 2011-04-11 21:03:22

当然，我喜欢做'z-index：{z-index-of-parent + 1}'，但由于父母没有z-index集合，我不知道如何找到要拍的索引！ – 2011-04-11 21:04:45

每次添加弹出窗口时，都可以增加一个变量。然后，使用JavaScript将最近弹出的z-index更改为100 + inc。我不知道是否有CSS解决方案，尽管... – Azmisov 2011-04-11 22:14:18

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

来源

2011-04-12 18:13:23

获得父级的计算z-索引（请参阅In GWT how to know all the styles applied to a given element (by id or class name)）并为每个孩子增加它。

来源

2011-04-12 14:12:30 z00bs

如果你的新的对话窗口后前几次插入DOM ：

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

来源

2011-04-12 14:20:42 peteorpeter

感谢您的提示。不幸的是，这只适用于一个已知的z-索引（我意识到我写的问题很差，并且不再强调z-索引的可变性，对不起）。 – 2011-04-12 14:27:36

好的，我明白了。你有第一个对话框的z-index的_approximate_的想法吗？您可以为该数字添加几个零，并将其设置为您添加的对话框的z-index。 Z-index值可能会相当高，仍然有效：http://www.puidokas.com/max-z-index/。 – peteorpeter 2011-04-12 16:24:54

相对z指数？

回答

相关问题