IE z-index относительная/абсолютная ошибка в списке

У меня есть следующая навигация, где .topNav имеет позицию: relative и subnav имеет позицию: absolute. Я не могу получить подсписку в главном списке из-за проблем с z-index. Это, по-видимому, известная проблема.

<ul>
<li class="topNav">About Us
<ul class="subNav"><li> Subsection A</li><li>Subsection B</li></ul>
</li>
</ul>

Кто-нибудь знает об обходном пути?

UPDATE http://brh.numbera.com/experiments/ie7_tests/zindex.html показывает, что проблема у меня есть. Моя первоначальная публикация была в контексте списка, но я уменьшил проблему до того, что z-index dosn't, похоже, работает, когда имеет элемент с позицией: абсолютный внутри родительского элемента с положением: относительный

ОТВЕТЫ

Ответ 1

Здесь очень хорошая статья, в которой объясняются проблемы с укладкой, о которых упоминает машина.

http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

Что вы можете рассмотреть (в зависимости от того, почему вы хотите позиционировать на нескольких элементах) добавляется селектор hover для .base(используйте JavaScript для IE6), который добавляет класс, чтобы придать ему относительность.

.base:hover{position:relative;}

Это значит, что вторая .base не имеет позиции: relative.

Ответ 2

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

<ul id="a">
  <li id="b">b</li>
  <li id="c">c</li>
</ul>
<div id="d"></div>

и "b" и "c" стилизованы так, что они перекрываются, z-index определяет, какой из них заканчивается сверху. Однако, если "c" и "d" перекрываются, "d" всегда будет сверху, независимо от того, какой c-индекс c, потому что элементы, которые ближе к корневому DOM node, всегда будут отображаться над элементами, которые являются вложенными глубже.

Итак, до тех пор, пока "subnNav" является дочерним элементом "topNav", я не думаю, что есть какой-либо способ заставить его покрыть его родительский контент. Другими словами, насколько я знаю, для этой проблемы нет обходного пути, за исключением того, что "subNav" не является дочерним элементом "topNav".

(ПРИМЕЧАНИЕ. Все, что сказано, CSS не прост, так что может быть какой-то способ получить эффект, который вы хотите, о котором я не знаю. Все, что я могу сказать, это то, что, основываясь на моем понимании z -index и мои довольно хорошие общие знания CSS, я не знаю об этом.)

Ответ 3

добавление

background: url(blank.gif);

для абсолютно позиционированных элементов решает проблему для меня. Mybe это может помочь u 2:)

рассматривает

Ответ 4

У меня была такая же проблема, и я смог ее исправить. В IE6 и 7. Объединив http://code.google.com/p/ie7-js/ со следующим CSS, проблема прошла далеко. С моей проблемой у меня были некоторые элементы внутри списка, расположенные слева, и появилась всплывающая подсказка, когда пользователь зависал над ли. Чтобы исправить это, я добавляю следующее:

.ul li:hover {position:relative;z-index:4;} .ul li:hover + li {position:relative;z-index:3;}

Как он работает, когда пользователь наводится на первый LI, например, он устанавливает второй LI, расположенный рядом с ним, до более низкого значения z-индекса. Вы можете, конечно, изменить значения z-index в соответствии с вашими потребностями.

Ответ 6

У Stu Nicholls в CSSplay есть get уровень CSS на основе w/6 понижается (при необходимости может быть увеличено до большего). Это работает в Internet Explorer IE5.5, IE6, IE7, Firefox, Opera и теперь Safari, Netscape 8 и Mozilla.

Ответ 7

Решение: присвойте z-индекс в порядке убывания

<div class="base" style="z-index:2">
<div class="inside">
    This has some more text in it. This also has a background. This should obscure the second block of text since it has a higher z-index.
</div>
This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it.
</div>

<div class="base" style="z-index:1">
This is the second div. You should not be seeing this in front of the grey box. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This second box should be obscured by the grey box.
</div>

Ответ 8

Подобно ответу @Orhaan, установка свойства фона для абсолютного элемента - единственное решение, которое сработало для меня...

background-color: rgba(0,0,0,0);

Спасибо Alex Leonoard