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

我的菜单元素应该在图像的顶部。像这样

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

。。。

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

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

。。。

---

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

我打赌不透明度会给图像提供一个z索引。您是否尝试过调整菜单上的z索引？

以解决此问题。调整z指数。请记住，z索引仅适用于定位的元素（绝对、相对等）

执行以下操作

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

---

谢谢

您能在上复制演示或类似内容吗？理想情况下。是的，如果应用

不透明度：1会发生什么？是的。不透明度弄乱了z指数！非常感谢。