Ошибка z-index в Internet Explorer? - PullRequest
Новая
       40

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

20 голосов
/ 21 июля 2009

Как вы перекрываете элемент над другим элементом, который расположен относительно в Internet Explorer? Z-index не работает, он всегда появляется за относительно позиционированным элементом.

Ответы [ 6 ]

17 голосов
/ 04 июля 2014

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

.myLinkCssClass {
    background          : url(#);
}
2 голосов
/ 21 июля 2009

Вы случайно не пытаетесь поместить что-либо поверх выпадающего списка (выбрать тег), iframe или флэш-фильма, верно?

В этих случаях z-index - безнадежная причина.

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

1 голос
/ 12 января 2010

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

<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 = третий) за пределами его родителя. 

<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>

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

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

0 голосов
/ 29 августа 2014

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

До: 

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

После того, как: 

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

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

0 голосов
/ 01 апреля 2014

Создайте, а затем установите дополнительное прозрачное фоновое изображение для элемента, который вы хотите иметь сверху. Для меня это наконец-то сработало в 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);
    }
  }
0 голосов
/ 27 сентября 2013

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

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

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

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

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

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

...