«
»

Internet Explorer и z-index


Странное поведение IE с абсолютным позиционированием и z-index...

Для обьектов с абсолютным позиционированием можно указывать z-index для перекрытия блоков. Чем больше значение z-index тем выше блок.

Пример:

<div style="position: relative;">
    <div style="background-color: maroon; position: absolute; width: 200px; height: 200px; top: 60px; z-index: 10"></div>
</div><div style="position: relative;">
    <div style="background-color: lightskyblue; position: absolute; width: 200px; height: 200px; top: 120px; left: 40px; z-index: 5"></div>
</div>

Во всех нормальных браузерах это будет выглядеть так:
z_index_ok

Но не в ИЕ:
z_index_fail

Для того, чтобы Internet Explorer начал располагать блоки согласно их z-index по-правильному, необходимо указать z-index для контейнеров:

<div style="position: relative; z-index: 2;">
    <div style="background-color: maroon; position: absolute; width: 200px; height: 200px; top: 60px; z-index: 10"></div>
</div>
<div style="position: relative; z-index: 1;">
    <div style="background-color: lightskyblue; position: absolute; width: 200px; height: 200px; top: 120px; left: 40px; z-index: 5"></div>
</div>

  • Digg
  • del.icio.us
  • Facebook
  • В закладки Google
  • FriendFeed
  • LinkedIn
  • MySpace
  • Twitter
  • Google Buzz
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • БобрДобр
  • Добавить ВКонтакте заметку об этой странице

, ,

This entry was posted on 20.02.2009, 15:47 and is filed under css, xhtml. You can follow any responses to this entry through RSS 2.0. также можно оставить комментарий или trackback на своем блоге.

  1. #1 by Виктор on 06.08.2010 - 12:41

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

    Ответить Цитировать

  2. #2 by Валентина on 06.07.2009 - 16:03

    Вообще-то, в описанном случае, только ИЕ показывает блоки именно так, как они и должны распологаться. Вы забыли очень важный факт, что z-index действет на элементы одного блока и не распространяется за пределы родительского. Таким образом ИЕ выдает нам единственно верный вариант: блоки идут в том порядке, в котором вы их расположили в своем html.

    Чтобы получить то эффект, который вам нужен надо просто положить абсолютно спозиционированные квадраты в один блок

    Ответить Цитировать

    • #3 by RE on 21.06.2010 - 09:41

      Свойство z-index по w3c не наследуемое, значит не должно распространятся на дочерние элементы блока. А в ИЕ оно не так

      Ответить Цитировать
(никто не узнает)