IE 6 и IE 7 Z-Index Проблема

Question

http://madisonlane.businesscatalyst.com

Я пытаюсь заставить знак div # сидеть выше div # bottom. Это прекрасно работает во всех браузерах, кроме IE6 и IE7. Кто-нибудь может увидеть, в чем здесь проблема?

Также IE6 отображает дополнительные 198px к вершине div # bottom.

Answer 1

Большинство ответов здесь неверны; некоторые работы, но не по той причине, что они заявляют. Вот некоторые объяснения.

Вот так должен работать z-index в соответствии с спецификацией :

• вы можете присвоить значение z-index любому элементу; если нет, по умолчанию auto
• позиционированные элементы (то есть элементы с атрибутом position, отличным от значения по умолчанию static) с z-index, отличным от auto, создают новый контекст стека . Контексты суммирования - это «единицы» перекрытия; один контекст суммирования находится либо полностью над другим (то есть каждый элемент первого выше любого элемента второго), либо полностью ниже него.
• в том же контексте стека сравнивается уровень стека элементов. Элементы с явным значением z-index имеют это значение в качестве уровня стека, другие элементы наследуются от своих родителей. Элемент с более высоким уровнем стека отображается сверху. Когда два элемента имеют одинаковый уровень стека, обычно тот, который находится позже в дереве DOM, отображается сверху. (Более сложные правила применяются, если они имеют другой атрибут position.)

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

Таким образом, z-index определяет, как элемент размещается по сравнению с другими дочерними элементами его «родительского стека» (ближайший предок с набором z-index и position из relative, absolute или fixed), но это не имеет значения при сравнении с другими элементами; учитывается z-index родителя-стека (или, возможно, z-index родителя-стека родителя-стека и т. д.). В типичном документе, где вы используете z-index только в нескольких элементах, таких как раскрывающиеся меню и всплывающие окна, ни один из которых не содержит другого, родительский элемент всех элементов, имеющих z-index, является целым документом, и вы обычно можете не думайте о z-index как о глобальном упорядочении на уровне документа.

Принципиальное отличие IE6 / 7 состоит в том, что позиционированные элементы запускают новые контексты стекирования, независимо от того, установлены они z-index или нет. Поскольку элементы, которым вы бы инстинктивно присваивали значения z-index, как правило, абсолютно позиционированы и имеют относительно позиционированного родителя или близкого предка, это будет означать, что ваши z-index -элементные элементы вообще не будут сравниваться, вместо этого их позиционированные предки будет - и так как у них не установлен z-index, порядок документов будет преобладать.

В качестве обходного пути вам нужно выяснить, какие предки на самом деле сравниваются, и назначить им некоторый z-index для восстановления нужного вам порядка (который обычно будет обратным порядком документа). Обычно это делается с помощью javascript - для выпадающего меню вы можете просматривать контейнеры меню или родительские элементы меню и назначать им z-index 1000, 999, 998 и т. Д. Другой метод: когда всплывающее или раскрывающееся меню становится видимым, найдите всех его относительно расположенных предков и присвойте им класс on-top, который имеет очень высокий z-индекс; когда он снова станет невидимым, удалите классы.

Answer 2

Согласен с комментарием валидатора - валидация обычно помогает. Но, если это не так, вот несколько указателей для z-index в IE:

1) элементы, которыми вы манипулируете z-индексом, должны быть на одном уровне, т.е. вы должны установить z-index #bottom и # body

если это невозможно, то

2) IE иногда неправильно применяет z-индекс, если только элементы, которые его применяют, не имеют position:relative. Попробуйте применить это свойство к #bottom и #body (или #signpost)

дайте мне знать, как это работает

Дарко

Answer 3

У меня просто была эта проблема, и я нашел исправление (благодаря Quirksmode), чтобы дать прямому родителю узла, который вы пытаетесь установить, z-индекс его собственного z-индекса, который меньше чем z Индекс узла, который вы пытаетесь установить. Вот быстрый пример, который должен работать в IE6

<html>
  <head>
    <style type="text/css">
      #AlwaysOnTop {
        background-color: red;
        color: white;
        width: 300px;
        position: fixed;
        top: 0;
        z-index: 2;
      }
      #Header {
        color: white;
        width: 100%;
        text-align: center;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div id="Header">
      <div id="AlwaysOnTop">This will always be on top</div>
    </div>
    <div id="Content">Some long amount of text to produce a scroll bar</div>
  </body>
</html>

Answer 4

Добро пожаловать, я решил проблему с:

.header { 
    position: relative;
    z-index: 1001;
}
.content {
    position: relative;
    z-index: 1000;
}

Answer 5

единственное надежное решение состоит в том, чтобы поместить верхние элементы ниже в коде, а затем поместить их поверх других элементов с абсолютным позиционированием.

например. Wordpress: поместите навигацию в файл нижнего колонтитула, но все еще внутри оболочки страницы.

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

UPDATE: Мне нужно исправить себя. Хотя поместить элемент ниже, а затем переместить его, все еще остается самым простым способом, существуют определенные случаи, когда это невозможно в разумные сроки. Затем вы должны убедиться, что каждый родительский элемент имеет какое-то позиционирование и некоторый осмысленный z-индекс . Тогда z-индекс должен снова работать даже в IE7.

Answer 6

У меня недавно была постоянная проблема с отображением одного слоя над другим. В моем случае я программно создавал два слоя в Javascript, один для отображения пользовательского элемента управления, а другой для создания полноэкранного слоя позади него. FF был в порядке, но IE отображал полноэкранный слой всегда поверх всего остального.

После многочисленных тралов по Интернету, пробуя предложения всех, единственный способ, с помощью которого я в конечном итоге заработал, состоял в том, чтобы удалить атрибуты position: с обоих слоев и настраивать атрибут margin-top:, пока я не получил удовлетворительный результат.

Немного хеш, но это работает, и все будет хорошо, пока IE 8 не разберется со всеми текущими ошибками ......

Answer 7

Похоже, у вас там есть какой-то искаженный HTML. Я пробовал считать, и, возможно, я потерял счет открывающих и закрывающих тегов, но похоже, что контейнер div # не закрыт. Попробуйте запустить свою страницу через валидатор (например, HTML-валидатор W3C или что-то в этом роде) и исправить некоторые ошибки. Это помогло мне с такими проблемами в прошлом. Удачи!