Ошибка стекирования z-индекса в IE7 - как правильно сложить 2 элемента с абсолютным позиционированием? - PullRequest
Новая
       42

Ошибка стекирования z-индекса в IE7 - как правильно сложить 2 элемента с абсолютным позиционированием?

1 голос
/ 19 марта 2012

Я сталкиваюсь с ошибкой стекирования z-index в IE7, но не могу найти способ ее обойти.Вот простой тестовый пример HTML: 

<!doctype html />
<html>
<head>
</head>
<body>
<div style="position:relative; width:500px;">
    <div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;">
        <p style="margin:0;">Menu</p>
        <ul style="position:absolute; z-index:100; list-style:none; margin:0; padding:0; background-color:#fff; border:1px solid #0000ff;">
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
        </ul>
    </div>
    <div style="position:absolute; z-index:1; top:40px; width:500px; height:75px; background-color:#ccc;">
        <p>Header</p>
    </div>
</div>
</body>
</html>

В этом примере вы увидите, что в div верхнего уровня есть два абсолютно позиционированных элемента.Первый - это меню, а второй - заголовок.Пункты меню расположены неправильно и отображаются за заголовком.

Screenshot

Я прочитал много постов об ошибке z-index в IE7, но не сделал этогонашел что-нибудь, что поможет мне с этой конкретной проблемой.Спасибо!

Ответы [ 3 ]

4 голосов
/ 19 марта 2012

Это общая проблема с IE7 и z-index. Вот ссылка на предыдущий вопрос, на который я ответил, который также содержит больше ссылок для дальнейшего чтения.

Перекрывающиеся текстовые элементы в выпадающих элементах

Короче говоря, если поле HEADER и окно MENU являются одноуровневыми, вам необходимо установить z-index для них. IE7 не работает, если вы только устанавливаете z-индекс в пунктах меню. 

<div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;">

Для приведенного выше DIV требуется более высокий z-индекс, потому что это брат и сестра, которые содержат детей, которые перекрывают друг друга.

В некотором смысле в IE7 требуется, чтобы родительские элементы передавали z-index своим дочерним элементам. Хотя это не технически правильно, так проще сказать или понять.

Вот скрипка: http://jsfiddle.net/JT9tw/

0 голосов
/ 19 марта 2012

Положение родительского элемента должно быть установлено относительно, а для элементов с абсолютным позиционированием должен быть установлен дисплей.

0 голосов
/ 19 марта 2012

Конечно, ли за заголовком. Приятно, что ваш li имеет более высокий z-индекс, чем заголовок. Но это дети другого стека. и этот стек имеет z-индекс 0. Это означает, что у вашего li Z-индекс равен 100 в элементе, у которого z-индекс равен 0. Заголовок является другим стеком с z = index 1 и находится над другим div (и его дочерними элементами).

...