Особенности позиционирования z-index в Internet Explorer

Опубликовано: 25 ноября, 2008 | Рубрика: Кодинг | Тэги: , , , , , | 17 Комментариев »

Один из интересных багов в Internet Explorer связан с поведением абсолютно позиционируемых блоков. Как известно, для позиционируемых блоков можно задать свойство z-index, имитирующее поведение блока в третьем измерении. То есть по сути, вы можете «накрывать» один блок другим, как бы выстраивая из них «пирамиду» по Z-оси.

В качестве значения z-index допустимо использовать положительное или отрицательно целое число, а также ноль. Логично было бы предположить, что чем выше это значение, тем выше в “пирамиде” будет находится блок. Но есть небольшой нюанс…

Предположим есть два блока, которые служат «контейнерами» для абсолютно позиционируемых элементов. Я нарисовал небольшую схемку для наглядности. Укажем для блока красного цвета бОльший z-index. Логично предположить, что именно он и будет перекрывать все остальные. И это действительно так во всех браузерах. Во всех, кроме Internet Explorer.

1
2
3
4
5
6
7
8
9
10

<div style="border:2px solid #333; position: relative; width: 204px; height: 150px;">
    <div style="background-color: red ; position: absolute; width: 200px; height: 200px; top: 60px; z-index: 10">
У этого блока значение z-index самое большее. Ожидаемое поведение: расположен поверх остальных блоков
</div>
</div>
<div style="border:2px solid #333; position: relative; width: 204px; height: 150px; left:65px;">
    <div style="background-color: blue ; position: absolute; width: 200px; height: 200px; top: -110px; z-index: 5; color:#fff">
Этот блок должен быть перекрыт, так как у него меньшее значение z-index
</div>
</div>

Расположение вложенных абсолютно позиционированных блоков

Этот браузер отрисует блоки по-своему, согласно расположению в html-коде: последний имеет бОльший приоритет и будет перекрывать все остальные. Чтобы убедиться в этом, можете добавить ещё один блок-контейнер, а внутреннему абсолютно позиционируемому блоку задать самое меньшее значение z-index. Тем не менее, в Internet Explorer он окажется на вершине «пирамиды» и перекроет все остальные блоки.

Всё дело в отсутствии у контейнеров с относительным позиционированием свойства z-index. Если оно не указано явно, то все браузеры просто не учтут его. Однако IE посчитает, что значения z-index одинаковы. А при равных значениях z-index у внешних контейнеров, вложенные абсолютно позиционируемые блоки отрисуются не в соответствии со своим значением z-index, а в зависимости от своего месторасположения в коде. И это верно для всех браузеров, в чём можно убедиться добавив блокам-контейнерам свойство z-index с одинаковым значением.

Демо

Вывод: чтобы избежать описанной проблемы, указывая z-index для абсолютно позиционируемого блока укажите это свойство и для «родительского» блока, позиционированного относительно.

чушьничего интересногомогло быть лучшеочень интересноотлично!
Может вам будет также интересно:

17 Комментариев на “Особенности позиционирования z-index в Internet Explorer”

  1. 1 Aderba  (21 апреля, 2009 в 10:11) :

    А если у меня блок которому я присваиваю z-index имеет position:relative, как с этим в IE бороться, т.к. во всех остальных браузерах все отабражаеться нормально, а в осле нет, блок у которого z-index:0; почему то находиться выше блока у котрого z-index:1 хотя по коду они расположены последовательно, т.е сначала 0 потом 1 …..
    Когда убираю position:relative, то все нормально, но едит верстка …..
    Подскажите как быть спасибо!

  2. 2 Роман  (21 апреля, 2009 в 12:20) :

    Aderba, простите, я не понял в чём задача… Если можно приведите тут фрагмент кода, тогда смогу помочь.

    Вообще, если для блоков указаны свойства position и z-index, то уже не важно, в какой последовательности в коде они прописаны. Блоки будут позиционироваться согласно стилевым правилам.

  3. 3 Aderba  (21 апреля, 2009 в 12:49) :

    Спасибо Роман, постараюсь вам объяснить свою проблему …..
    http://file.qip.ru/file/84633790/92d3705d/simple1.html – это меню исходное
    http://file.qip.ru/file/84633798/9c08f86f/simple2.html – это когда навожу на пункт меню верхний MyPage видите, пункт меню products получаеться над выпадающим меню, хотя должен быть под ним.
    Вот часть код который это реализует:
    Это стили.

    .Gmenu ul, .Gmenu ul li{margin:0;padding:0;display:inline;}
    .Gmenu ul li {float:left;position:relative;width:auto;z-index:0;}// вот здесь если убрать relative то все скрываеться но подменю отображаеться не там где надо
    .Gmenu ul li a.ahr{padding:0 9px;}
    .Gmenu ul li ul {display:none;position:absolute;z-index:1;}..выпадающее дменю
    .Gmenu ul li ul li {display:block;border-top:0px;padding: 2px 0 2px 0;white-space:nowrap;}

    .Gmenu ul li ul{left:0px;}

    В IE я еще под меню подкладываю iframe чтобы выпадающее меню перекрывала select выпадающие писки

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

  4. 4 Роман  (21 апреля, 2009 в 13:56) :

    А где же сам код? Вижу только стили. Воспользуйтесь для форматирования кода тегом code или на мне email

  5. 5 Aderba  (21 апреля, 2009 в 14:11) :

    Просто сам HTML код довольно большой и я думаю в нем особо нет смысла ….. все стили в css
    http://file.qip.ru/file/84645038/f4e385ac/simple.html – вот тут код .
    У меня также используется javascript для тени выпадения меню …..

  6. 6 Роман  (21 апреля, 2009 в 17:03) :

    Aderba, я посмотрел код и, собственно говоря, у вас именно та проблема которую я описал в статье. Читайте в предпоследнем абзаце:
    …при равных значениях z-index у внешних контейнеров, вложенные абсолютно позиционируемые блоки отрисуются не в соответствии со своим значением z-index, а в зависимости от своего месторасположения в коде…

    Именно это у вас и происходит: внешний элемент списка хотя и имеет меньшее значение z-index, однако оно одинаково у всех. И так как абсолютно позиционируемый блок расположен в коде выше, то перекрыть остальные он не может. Решить проблему можно по разному: либо сразу назначить разные значения z-index, либо задавать их динамически…

  7. 7 Aderba  (21 апреля, 2009 в 17:07) :

    спасибо Роман ….. буду пробовать исправлять …..

  8. 8 Роман  (21 апреля, 2009 в 17:36) :

    для наглядности вот пример

  9. 9 Сергей  (27 марта, 2011 в 22:44) :

    Помогите пожалуйста, на странице http://han-girey.com/viewpage.php?page_id=3 в браузере IE режет картинку, уже пробовал по вашему методу, но не удачно. Подскажите плиз.

  10. 10 Роман  (31 марта, 2011 в 00:57) :

    Сергей, ваш сайт не доступен. Требуется ввести пароль.

  11. 11 Сергей  (4 апреля, 2011 в 22:59) :

    Извиняюсь, сайт закрыл на не которое время, когда открою отпишусь.

  12. 12 Сергей  (27 мая, 2011 в 08:35) :

    Здравствуйте, если можно посмотрите сайт http://han-girey.com/viewpage.php?page_id=3 в браузере IE режет картинку

  13. 13 Роман  (30 мая, 2011 в 23:01) :

    Сергей, если я правильно понял, вас беспокоит, что на вашем сайте flash-видео перекрывает картинку. Это немного другая проблема, чем та что я описал на этой странице, но тоже известный баг IE и лечится он достаточно просто. Как именно почитайте тут: http://www.webcocktail.ru/coding/kak-raspolozhit-blok-nad-flash/ Ключевая фраза Windows Mode. Просто добавьте параметр в код видео-ролика.

  14. 14 Сергей  (3 июня, 2011 в 22:27) :

    Огромное спасибо за помощь, почитал статью, вставил код и ошибка исправилась. СПАСИБО!!!

  15. 15 Егорко  (10 июня, 2011 в 12:18) :

    Спасибо, добрый человек=) я уж думал заказать Гейтса=))

  16. 16 paco  (24 августа, 2011 в 07:02) :

    http://irriteh.ru/ – помогите пожалуйста, в IE6 меню никак не хочет выходить над контентной чатью :(

  17. 17 Роман  (24 августа, 2011 в 18:05) :

    Честно говоря, я проапгрейдился недавно с шестой версии IE до восьмой, так что не могу быть уверенным на сто процентов, но мне кажется, если вы установите для блока id=”content” значение z-index равное 1, то это решит вашу проблему. Проверить сам, к сожалению, не могу, так что напишите, поможет ли.

Есть мнение? Высказывайтесь!