css 为什么不透明会使一个元素出现在另一个元素的上方，而没有不透明的元素出现在下方？

ejk8hzay 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(234)

我有一个绝对定位的弹出表格，默认情况下是隐藏的（display:none;），
并且在其航向上悬停时出现（display:block;）。
它出现在页面上的其他所有东西之上，这就是我想要的。
opacity值小于1的元素除外。
它们显示在悬停表上方。
为什么会这样，我又该如何避免呢？
JSFiddle

css

来源：https://stackoverflow.com/questions/75413478/why-does-opacity-make-an-element-appear-above-another-if-an-element-without-is

2条答案

按热度按时间

2izufjch1#

这是“应该的”，但是要获得想要的结果，请在position: absolute元素上使用z-index: 1。
我对此做了更多的研究，因为我很好奇为什么会发生这种情况。有两件重要的事情：
1.具有position: absolute和z-index: auto的元素保持在相同的stacking context中。
1.不透明度小于1的元素创建新的堆叠上下文。
我发现this answer很有帮助，因为它更深入地说明了为什么会发生这种情况。