z-индекс не работает с абсолютной позицией

Я открыл консоль (chromefirefox) и запустил следующие строки:

$("body").append("<div id="popupFrame" style="width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;" />");
$("body").append("<div id="popupContent" style="width:200px;height:200px;z-index:1000;background-color:white;" >dasdasdsadasdasdasdasdasd</div>");

#popupContent должен быть выше всего, но на него влияет непрозрачность #popupFrame.

содержание не содержится в #popupFrame, что делает это очень странно.

цель состоит в том, чтобы создать firefox, как окно оповещения

Я буду признателен за любую помощь.

спасибо заранее.

4 77
html css

4 ответа:

второй div-это position: static (по умолчанию), так что Z-индекс не применяется к нему.

вам нужно позиционировать (установите свойство position на что-либо, кроме static, вы, вероятно, хотите relative в данном случае) все, что вы хотите дать z-index для.

168

непрозрачность изменяет контекст вашей Z-индекса, как и статическое позиционирование. Либо добавьте непрозрачность к элементу, который его не имеет, либо удалите его из элемента, который это делает. Вам также придется либо сделать оба элемента статическими, либо указать относительное или абсолютное положение. Вот некоторые предпосылки для контекстов:http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

31

z-index применяется только к элементам, которым была задана явная позиция. Добавить position:relative в popupContent #и вы должны быть хорошо идти.

21

старый вопрос, но этот ответ может помочь кому-то.

Если вы пытаетесь отобразить содержимое контейнера вне границ контейнера, убедитесь, что он не имеет overflow:hidden, в противном случае все, что вне его будет отрезано.

8