Z-Index в Internet Explorer - PullRequest
       26

Z-Index в Internet Explorer

1 голос
/ 29 июля 2010

Я пытаюсь заставить z-index работать в моем HTML-коде.Я посмотрел это в нескольких местах, и это говорит о том, что мне нужно добавить позицию в мой div.Я уже сделал это, и это все еще не работает.Ниже приведены CSS и HTML, которые я использовал для z-index.

CSS:

.Location{
    width: 1000px;
    margin-top: 50px;
    margin-left: auto;
    margin-bottom: 0px;
    margin-right: auto;
}

.logo{
     background-color: white;
     position: relative;
     left: 40px;
     float: left;
     width: 225px;
     z-index: 10;
     padding-left: 15px;
     padding-bottom: 20px;
     padding-top: 20px;
}

Ответы [ 2 ]

1 голос
/ 29 июля 2010

То, что у вас есть, правильно применять z-index: позиция типа относительная, фиксированная или абсолютная. Проблема с IE заключается в том, что он не применяет z-индекс элемента глобально ко всему документу, как в других браузерах.

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

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

<div style="position: relative">
   <div style="position: relative; z-index: 1;">
   </div>
</div>
<div style="position: relative">
   <div style="position: relative; z-index: 2;">
   </div>
</div>

В приведенном выше примере все браузеры , но IE всегда помещают z-index: 2 div выше z-index: 1. Однако IE не всегда будет, потому что оба элемента находятся в их собственной структуре контекст и поэтому их z-индексы не применяются друг к другу.

Исправление заключается в добавлении z-индекса к родительским элементам, которые создают отдельный контекст стека:

<div style="position: relative; z-index: 1;">
   <div style="position: relative;">
   </div>
</div>
<div style="position: relative; z-index: 2;">
   <div style="position: relative;">
   </div>
</div>
0 голосов
/ 29 июля 2010

Ну, вы еще не разместили HTML, поэтому вам немного сложно помочь.Но эти статьи должны помочь вам понять, как правильно использовать z-index:

...