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

Ya, высота и ширина измеряется в пикселях

13
задан AJM 28 April 2009 в 16:00
поделиться

6 ответов

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

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

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

.base:hover{position:relative;}

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

17
ответ дан 1 December 2019 в 22:40
поделиться

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

1
ответ дан 1 December 2019 в 22:40
поделиться

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

0
ответ дан 1 December 2019 в 22:40
поделиться

добавление

background: url(blank.gif); 

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

regards

1
ответ дан 1 December 2019 в 22:40
поделиться

Решение: назначить 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>
0
ответ дан 1 December 2019 в 22:40
поделиться

У меня была такая же проблема, и я смог ее исправить в 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 в соответствии со своими потребностями.

1
ответ дан 1 December 2019 в 22:40
поделиться