Проблема с IE-индексом IE 6 и IE 7

Ответ 1

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

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

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

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

сообщите мне, как это работает

Дарко

Ответ 2

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

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

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

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

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

Ответ 3

У меня просто была эта проблема, и найденное мной исправление (благодаря Quirksmode) заключалось в том, чтобы предоставить прямой родительский элемент node, который вы пытаетесь установить z-индекс собственного z-индекса, который меньше, чем z-index node, который вы пытаетесь установить. Вот краткий пример, который должен работать в 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>

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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