Проблема zIndex в IE - PullRequest
Новая
       29

Проблема zIndex в IE

3 голосов
/ 04 апреля 2011

Z-index stacking

Проблемы с zIndex - это общая проблема в Internet Explorer. Мой вопрос в основном таков: можно ли сделать следующее в IE? Я пытался, но IE продолжает ставить #middle div выше или ниже ...

Ответы [ 2 ]

1 голос
/ 04 апреля 2011

Ваша самая большая проблема здесь - контейнер.

Это может сработать, если вы не поставите контейнер в абсолютное положение или если вы можете поместить его поверх контейнера вне контейнера

Пример без абсолюта на контейнере 

   <div id="container" style="width:300px; height:300px; background-color:#CCC;">
    <div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;"></div>
    <div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>    
</div>
    <div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>

Пример с ontop снаружи контейнера 

<div id="container" style="width:300px; height:300px; background-color:#CCC; top:0; left:0;position:absolute;  z-index:1;">
    <div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;">
    </div>
</div>
<div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>
<div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>
0 голосов
/ 13 декабря 2012

jsfiddle, связанный в комментариях к вопросу, уже имеет правильный ответ, реализованный для поддержания текущей древовидной структуры документа: контейнер должен быть принудительно переведен в нормальный поток с помощью 'position: static'.В противном случае IE предполагает, что все содержащиеся позиционированные элементы основаны на контексте z-индекса контейнера (и, в свою очередь, их z-индексирование действует только относительно контейнера и дочерних элементов контейнера), по сути, как если бы контейнер контейнера не находился в нормальномпоток, даже если контейнер не был явно расположен.

Вот jsfiddle вопроса без position: static, прикрепленного к контейнеру.

Вотjsfiddle с прикрепленным position: static, как указано в комментариях.

Первый разрыв в режиме IE7 в IE9 (отлично работает в chrome), второй работает в режиме IE7 в IE9 (и работает вchrome).

Если опция 'position: static' не является опцией, вам придется переместить div вне контейнера, чтобы он как минимум находился в среднем div, как показано в другом ответе.

Это не интуитивно понятно, поскольку контекст z-index для IE основан на степени, в которой различные элементы связаны друг с другом в контексте с их fl.ow / нормальный поток, а не структура документа.

...