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

Question

У меня есть следующая навигация, где .topNav имеет положение: относительный, а subnav имеет положение: абсолютный. Я не могу отобразить подсписок поверх основного списка из-за проблем с z-index. Кажется, это известная проблема.

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

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

---

ОБНОВЛЕНИЕ http://brh.numbera.com/experiments/ie7_tests/zindex.html точно показывает проблему, которая у меня есть. Моя первоначальная публикация была в контексте списка, но я свел проблему к тому факту, что z-index не работает, когда элемент с позицией: абсолютный внутри родительского элемента с позицией: относительный

---

Answer 1

Вот очень хорошая статья, которая объясняет проблемы стека, о которых упоминает машина-призрак.

http://css -discuss.incutio.com / вики / Overlapping_And_ZIndex

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

.base:hover{position:relative;}

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

Answer 2

Это помогло мне. ;)

http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/

Answer 3

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

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

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

Answer 4

добавление

background: url(blank.gif); 

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

привет

Answer 5

Хорошо, я думаю, что ваша проблема, вероятно, связана с отсутствием понимания того, как работает 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» всегда будет на вершине, независимо от того, каков z-индекс c, потому что элементы, которые находятся ближе к корневому узлу DOM, всегда будут появляться над элементами, которые вложены глубже .

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

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

Answer 6

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

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

Спасибо, Алекс Леонард

Answer 7

Решение: назначить z-index в порядке убывания

<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>

Answer 8

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