为什么 z 索引不允许单击"确定"按钮？

Question

我有一个#popup-shadowdiv，它占用了所有视口，以便使#popup成为模态，并防止#popup的所有输出都是可点击的。这是有效的。

问题：它甚至让#popup内部的所有都无法点击。为什么？

既然#popup具有更高的z-index(值100！(，为什么OK按钮不可点击？

#popup-shadow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
#popup { width: 400px; background-color: #eee; z-index: 100; }
#popup-buttons div { font-size: 2em; text-align: center; padding: 15px 0; }
#popup-buttons div:hover { cursor: pointer; }

<div id="popup-wrapper">
<div id="popup-shadow"></div>    
<div id="popup">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<div id="popup-buttons">
<div onclick="alert();">OK</div>
</div>
</div>
</div>

注意：如果我们删除<div id="popup-shadow"></div>，它会起作用。

Answer 1

z-index不会影响未定位的元素。将position :relative添加到popup

#popup-shadow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
#popup { position:relative; width: 400px; background-color: #eee; z-index: 100; }
#popup-buttons div { font-size: 2em; text-align: center; padding: 15px 0; }
#popup-buttons div:hover { cursor: pointer; }

<div id="popup-wrapper">
<div id="popup-shadow"></div>    
<div id="popup">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<div id="popup-buttons">
<div onclick="alert();">OK</div>
</div>
</div>
</div>

Answer 2

您必须将position: relative;添加到#popup

然后它将变成：#popup { width: 400px; background-color: #eee; z-index: 100; position: relative; }