Z-index не работает с абсолютной позицией

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

$("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.

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

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

Ответ 1

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

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

Ответ 2

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

Ответ 3

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