IE z-index relatif/bug absolu dans la liste

Question

J'ai la navigation suivante où .topNav a la position: relative et subnav a la position: absolute. Je ne peux pas obtenir la sous-liste à apparaître sur la liste principale en raison de problèmes z-index. Cela semble être un problème connu.

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

Est-ce que quelqu'un sait d'une solution de contournement?

---

MISE À JOUR http://brh.numbera.com/experiments/ie7_tests/zindex.html montre exacly le problème que j'ai. Mon affichage original était dans le contexte d'une liste mais j'ai réduit le problème au fait que z-index ne semble pas fonctionner quand avoir un élément avec position: absolu dans un élément parent avec la position: relative

---

Answer 1

Voici un très bon article qui explique les problèmes d'empilement mentionnés par machineghost.

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

Ce que vous pouvez envisager (selon la raison pour laquelle vous êtes désireux de positionnement sur plusieurs éléments) est l'ajout d'un sélecteur de vol stationnaire à .base (utiliser JavaScript pour IE6) qui ajoute la classe pour lui donner relativité.

.base:hover{position:relative;} 

Cela signifie alors que le second ne .base pas position: relative. Stu Nicholls at CSSplay a un get CSS Based nav w/ 6 level drop down (peut être étendu à plus si nécessaire)

Answer 2

Ok, je pense que votre problème vient probablement d'un manque de compréhension sur le fonctionnement de z-index. La propriété z-index n'est pertinente que pour les éléments au même niveau dans la hiérarchie DOM. En d'autres termes, si vous avez:

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

et « b » et « c » sont décorées de façon telle qu'elles se chevauchent, z-index déterminera que l'on finit par en haut. Cependant, si "c" et "d" se chevauchent, "d" sera toujours en haut, quel que soit l'index z de c, car les éléments qui sont plus proches du noeud DOM racine apparaîtront toujours au-dessus des éléments imbriqués Donc, tant que "subnNav" est un enfant de "topNav", je ne pense pas qu'il existe un moyen de le faire couvrir le contenu de ses parents. En d'autres termes, pour autant que je sache, il n'y a pas de solution à ce problème, sauf pour que "subNav" ne soit pas un enfant de "topNav".

(NOTE: Cela étant dit, CSS n'est pas simple, donc il peut toujours y avoir un moyen d'obtenir l'effet que vous voulez que je ne sache pas tout ce que je peux dire est que, selon ma compréhension de z-index et mes très bonnes connaissances générales en CSS, il n'y a aucun moyen que je connaisse.)

Answer 3

Cela fonctionne dans Internet Explorer IE5.5, IE6, IE7, Firefox, Opera et maintenant Safari, Netscape 8 et Mozilla.

Answer 4

ajouter

background: url(blank.gif); 

pour elemnts position absolue permet de résoudre le problème pour moi.MTBE il peut aide u 2 :)

concernant

Answer 5

Solution: assigner z-index par ordre décroissant

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

J'ai eu le même problème et a pu le fixer dans IE6 et 7. La combinaison http://code.google.com/p/ie7-js/ avec le CSS suivant le problème a disparu. Avec mon problème, certains éléments d'une liste flottaient à gauche et une info-bulle apparaissait chaque fois que l'utilisateur survolait le li. Pour résoudre ce problème, j'Adde ceci:

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

La façon dont cela fonctionne est à chaque fois que l'utilisateur passe au-dessus du premier LI par exemple, il définit la deuxième LI flottait à côté de lui à une valeur z-index inférieur. Vous pouvez bien sûr modifier les valeurs de l'index z pour répondre à vos propres besoins.

Answer 7

Cela a fait l'affaire pour moi. ;)

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

Answer 8

similaires à répondre par @Orhaan, définissant une propriété d'arrière-plan à l'élément absolu est la seule solution qui a fonctionné pour moi ...

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

Thanks Alex Leonoard