为何设置z-index后弹窗内的OK按钮仍无法点击？

• 核心问题：z-index属性仅对非static定位的元素生效。你的#popup未设置position属性，默认处于static状态，因此你设置的z-index:100完全不生效。而#popup-shadow是fixed定位（非static），会覆盖所有static定位的元素，包括弹窗本身，导致弹窗内按钮无法被点击。

• 修复方案：给#popup添加任意非static的定位属性，比如relative、absolute或fixed，让z-index生效，确保弹窗层级高于遮罩层。修改后的CSS代码如下：

#popup-shadow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
#popup { 
  width: 400px; 
  background-color: #eee; 
  z-index: 100; 
  position: relative; /* 关键：添加非static定位 */
}
#popup-buttons div { font-size: 2em; text-align: center; padding: 15px 0; }
#popup-buttons div:hover { cursor: pointer; }

如果想让弹窗居中显示，可以改用fixed定位并添加居中样式：

#popup { 
  width: 400px; 
  background-color: #eee; 
  z-index: 100; 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平垂直居中 */
}

内容的提问来源于stack exchange，提问作者Basj