Вот очень хорошая статья, в которой объясняются проблемы стека, о которых упоминает машинный призрак.
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
Что вы, возможно, захотите подумайте (в зависимости от того, почему вы хотите позиционировать на нескольких элементах) добавление к .base селектора при наведении (используйте JavaScript для IE6), который добавляет класс для придания ему относительности.
.base:hover{position:relative;}
Это означает, что второй .base не не имеет положения: относительный.
Хорошо, я думаю, что ваша проблема, вероятно, связана с отсутствием понимания того, как работает 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», я не думаю, что есть какой-либо способ сделать так, чтобы он покрывал содержимое своего родителя. Другими словами, насколько я знаю, нет решения этой проблемы,
Стю Николс в CSSplay имеет get Навигация на основе CSS с понижением уровня 6 / (при необходимости может быть расширено до большего). Это работает в Internet Explorer IE5.5, IE6, IE7, Firefox, Opera и теперь Safari, Netscape 8 и Mozilla.
добавление
background: url(blank.gif);
для абсолютно позиционированных элементов решает проблему для меня. Возможно, это поможет и вам 2 :)
regards
Решение: назначить 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>
У меня была такая же проблема, и я смог ее исправить в IE6 и 7. Объединение http://code.google.com/p/ie7-js/ со следующим CSS проблема исчезла. С моей проблемой у меня были некоторые элементы внутри списка, плавающие влево, и всплывающая подсказка, которая всплывала всякий раз, когда пользователь наводил курсор на li. Чтобы исправить это, я добавляю следующее:
.ul li: hover {position: relative; z-index: 4;}
.ul li: hover + li {позиция: относительная; z-индекс: 3;}
Это работает так: когда пользователь наводит курсор на первый LI, например, он устанавливает для второго LI, размещенного рядом с ним, более низкое значение z-индекса. Конечно, вы можете изменить значения z-index в соответствии со своими потребностями.