it-swarm.com.ru

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

http://madisonlane.businesscatalyst.com

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

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

21
mattt

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

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

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

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

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

Дарко

20
Darko Z

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

Вот как 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-индекс; когда он снова станет невидимым, удалите классы.

152
Tgr

У меня просто была эта проблема, и я нашел исправление (благодаря 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>
4
Jason Sperske

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

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

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

0
Shalom Craimer

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

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

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

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

0
Waschbär

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

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

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

0
Paul Gordon