CSS: непрозрачность заставляет экранный объект переходить под другие объекты

Question

Мои элементы меню должны быть в верхней части изображения.Вот так

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

Однако, когда я добавляю непрозрачность к стилю изображения, элементы меню располагаются под изображением

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

Кто-нибудь знает, что происходит и как мне решить эту проблему?

Answer 1

Для решения этой проблемы. Отрегулируйте 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;"/>

Спасибо

Answer 2

Моя ставка была бы непрозрачной, чтобы дать z-index изображению. Вы пытались настроить z-index в меню?