CSS：不透明度使显示对象位于其他对象下

Question

我的菜单元素应该在图像的顶部。喜欢这个

<div class="menu">...</div>
<img src="..."/>

但是，当我为图像样式添加不透明度时，菜单元素位于图像

下

<div class="menu">...</div>
<img src="..." style="opacity:0.9"/>

有谁知道发生了什么，我该如何解决这个问题？

Answer 1

我的赌注是不透明度为图像提供z-index。您是否尝试过调整菜单上的z-index？

Answer 2

解决这个问题。调整z-index。请记住，z-index仅适用于定位（绝对，相对等等）元素

执行以下操作

<div class="menu" style="position: relative; z-index:100000;"></div>
<img src="..." style="position: relative; opacity:0.9; z-index:-1;"/>

由于