为什么我的div的固定位置会影响弹出div？

Question

我有这个小提琴：https://jsfiddle.net/reko91/yg0rs4xc/13/

请注意，单击按钮并显示弹出按钮时，您无法点击任何内容。当你这样做时，弹出消失了。

这是工作小提琴：https://jsfiddle.net/reko91/yg0rs4xc/14/

由于我将wholeContainer div的位置从fixed更改为absolute。

有人可以解释为什么会这样吗？

Answer 1

当您将元素设置为position:fixed时，该元素将变为相对于文档的相对而不是相对于它的父元素。这意味着如果希望元素正常运行，则必须添加z-index。

https://jsfiddle.net/yg0rs4xc/15/

如果它是绝对的，那么它与父母的相对，所以不需要添加z-index。