Ошибка z-index в Internet Explorer?

Ответ 1

Похоже, я шучу, но я не

.myLinkCssClass {
    background          : url(#);
}

Ответ 2

Вы не случайно пытаетесь что-то поместить над списком combobox (select tag), iframe или флеш-роликом?

В этих случаях z-индекс является потерянной причиной.

В противном случае, какую версию браузера вы используете, и используете ли вы абсолютное позиционирование?

Ответ 3

У меня была настоящая боль с этой проблемой, что это конкретное обходное решение не было актуальным. Это немного сложно объяснить, поэтому я попытаюсь использовать код:

<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

Проблема в том, что установка родительского индекса z на большее значение переместила бы его на передний план вместо того, где он должен был быть. Я случайно наткнулся на решение: я сделал копию элемента переднего плана (id = third) вне его родителя.

<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>

Стоит отметить, что в моем исходном коде элементы не имеют идентификаторов, поэтому я не страдаю от двух элементов, разделяющих один и недействительный мой HTML.

Я считаю, что безопасно классифицировать эту странность как еще одну ошибку, которая помогает с оригиналом, но она работает, по крайней мере, для меня. Надеюсь, кто-то найдет это полезным!

Ответ 4

Я хотел бы отметить, что если вы используете IE8 и ниже, он не поддерживает фильтры CSS3. Это была моя проблема.

Я использовал:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@black00', endColorstr='@black00', GradientType=0);

Независимо от того, для чего я установил свою позицию или z-index, вы не могли видеть другой слой, потому что он вызывал полную маску над этим слоем (вместо перехода от четкого к черному и для очистки снова).

Удалив фильтр CSS3 только для IE8, я смог решить мою проблему.

Надеюсь, это поможет кому-то, кто сталкивается с той же проблемой.

Ответ 5

Создайте и затем установите дополнительное прозрачное фоновое изображение на элементе, который хотите иметь сверху. Для меня это, наконец, работало в IE8. SASS:

  #galerie-link {
    position: absolute;
    z-index: 1000;
    top: 25px;
    left: 40px;
    a {
      display: block;
      width: 185px;
      height: 90px;
      background-image: url(../images/transparent.png);
    }
  }

Ответ 6

У меня была такая же проблема в html, где многие повторяющиеся относительные позиционные divs блокировали абсолютное позиционное div-представление. Обходной путь, предоставленный www.brenelz.com, который я уже использовал с успехом, не работал в этом случае. Итак, для меня работало следующее: Я удалил относительное позиционирование из тех разделов, которые я упомянул первым, а затем добавил CSS, чтобы превращать эти divs в относительные при наведении. Позвольте мне показать вам код:

До:

DivThatYouMustHover {
height: 300px;
position: relative;
width: 200px;
}

После:

DivThatYouMustHover {
height: 300px;
width: 200px;
}
DivThatYouMustHover:hover {
position:relative;
}

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