IE игнорирует Z-Index на позиционированных элементах - PullRequest
Новая
       11

IE игнорирует Z-Index на позиционированных элементах

4 голосов
/ 01 марта 2010

IE снова оказывается проклятием моего существования. В верхней части сайта, над которым я работаю, есть горизонтальное меню, пункт которого вызывает меню из чистого CSS, которое позиционируется как абсолютное в родительском меню DIV (позиционировано относительно). Это позволяет разместить меню в браузерах, совместимых с IE и W3C.

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

Проблема в том, что затем открывается верхнее меню, часть которого скрыта позиционируемыми элементами дальше вниз по странице - фактически она позиционируется НИЖЕ этих элементов, даже если для всех определены свойства z-index. (как в файле CSS, так и во встроенном).

Единственный способ заставить IE правильно отобразить это - поместить фактический HTML для меню внизу страницы, под (в терминах DOM) позиционируемыми элементами в другом месте на странице. Я бы сделал это только в качестве крайней меры. * +1007 *

Все элементы одного типа (div). Вот соответствующий HTML: 

<div id='menu'>
<div id='cat_menu' style='display:none;z-index:10000;'>
<table cellspacing='0' cellpadding='0' class='brmenu' width='100%'>
    [data]
</table>
</div>


<div class='product_new' style='z-index:20;'>[data]</div>
<div class='product_listing' style='background-color:#FFFFFF;'>[data]</div>

И соответствующий CSS: 

div#menu {
height: 26px;
padding: 0;
position: relative;
}

div#cat_menu {
position: absolute;
top: 25px;
left: 115px;
width: 300px;
z-index: 1000;
}

 div.product_new {
background-image: url("/images/sp_images.png");
background-position: 0 -108px;
background-repeat: no-repeat;
padding 0px;
height: 40px;
font-size: 9pt;
margin-top: 5px; 
position: relative;
z-index: 20;
}

Ответы [ 4 ]

2 голосов
/ 21 июля 2012

У меня была такая же проблема. Немного поэкспериментировав, я согласен с Дэвидом: «IE надежно отображает только z-индексы для элементов одного уровня».

Я нашел простое альтернативное решение. Похоже, что то есть визуализирует z-index для не родственных элементов как ноль (как если бы они не имели z-index). Я решил проблему, установив отрицательные z-индексы для нарушающих элементов и их родительских элементов, поместив их под элементами с z-index, сбрасываемыми в ноль, т. Е.

0 голосов
/ 01 марта 2010

Решение выше для jQuery, похоже, работает и с Prototype ... Я включил код PrototypeJS ниже: 

var zIndexNumber = 1000;
$$("div").each(function(e) {
    e.setStyle({ zIndex: zIndexNumber });
    zIndexNumber -= 10;
});
0 голосов
/ 27 марта 2010

Пара заметок:

  • выпадающие списки доказали свою эффективность. Зачем изобретать велосипед?
  • IE только надежно отображает z-индексы для родственных элементов. В связи с этим лучше всего использовать элементы «z-index», которые являются прямыми потомками тега BODY.
  • Если вы не хотите менять разметку, вам, вероятно, потребуется установить z-index для элемента #menu выше «20». Проблема заключается в том, что установка z-индекса выводит элемент из потока (что нежелательно).
  • Атрибут style = "..." делает CSS невероятно специфичным (требуя от вас использовать "! Important" в вашей таблице стилей. Пожалуйста, не забудьте перенести эти атрибуты стиля)
  • "Положение: относительно" вызывает "hasLayout" для IE
0 голосов
/ 01 марта 2010
...