Est-ce que z-index est le seul moyen de forcer un élément à être placé au-dessus d'un autre, sinon quelles sont les autres méthodes?

Question

Je travaille sur une application avec une carte et il y a un div dans le coin avec quelques trucs dedans. Vous pouvez cliquer sur cette carte pour afficher quelques informations dans une petite fenêtre. La fenêtre est, dans certains cas, couverte par la div dans le coin.

Je veux l'effet inverse (fenêtre couvre div). Je pensais que ce serait simplement un problème de z-index, mais je suis incapable de le faire fonctionner. C'est avec IE7 et en lisant un peu, il semble que z-index ne fonctionnera pas à moins qu'il ne soit dans un élément positionné.

Les éléments semblent être positionnés correctement pour que l'index z fonctionne correctement, mais j'ai peu de chance. J'ai joué avec l'ajout de styles via Firebug mais je n'ai pas eu de chance de changer quoi que ce soit. La fenêtre est vraiment juste deux divs un absolument positionné un et un relatif à l'intérieur de celui-ci.

Est-ce que le z-index est la seule chose qui pourrait poser problème ici ou y a-t-il autre chose que je ne connais pas?

Existe-t-il d'autres méthodes pour obtenir l'effet souhaité? Je ne peux pas simplement cacher la div via jquery ou quelque chose car une partie devrait être visible derrière la fenêtre qui s'ouvre sur la carte.

Answer 1

Vous frappez le contexte empilement bug

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Chaque div positionné dans IE va créer un nouveau contexte d'empilement et d'éviter des contextes d'empilement z-index de diferent à venir au-dessus des autres.

La solution est d'avoir la fenêtre que vous voulez dans l'arbre (dans le corps par exemple) et z-index plus raster que z-index de tous les parents de l'autre div couvrant votre fenêtre.

Des informations détaillées pour comprendre le problème ici: http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

Answer 2

marges de positionnement et négative est la seule façon d'obtenir des éléments à se chevaucher, que je sache. z-index est juste utilisé pour indiquer explicitement au navigateur comment superposer les éléments. En ce qui concerne votre problème, IE requiert que les éléments de conteneur et/ou les éléments que vous chevauchez aient position:relative; ou position:absolute; pour que z-index fonctionne correctement. Lorsque quelqu'un dit positionnement, cela signifie généralement que la propriété position est définie en CSS. Aussi, lorsque vous travaillez avec z-index, assurez-vous que les éléments qui se chevauchent sont au même niveau l'un par rapport à l'autre.

Hope this helps

Answer 3

par ailleurs suggéré que les autres réponses, position:relative et position:absolute réinitialiser le "empilement contexte" dans IE.

Answer 4

Si vous voulez une réponse plus paresseuse, vous pouvez utiliser javascript et masquer la div lorsque vous cliquez sur la carte, et l'afficher lorsque vous fermez la carte.

Vous devrez tout de même faire cela avec n'importe quelle sélection sur la page parce qu'en IE ils ne fonctionnent pas avec z-index.

Answer 5

J'ai rencontré ce même problème il y a quelques jours et j'ai trouvé que la marge négative suggérée par Darko Z fonctionnait bien.(Mon représentant n'est pas encore assez bon pour voter pour Darko)

J'ai écrit un post rapide à ce sujet. Tout simplement

http://www.swards.net/2009/03/layering-html-elements-without-using.html

Answer 6

, l'ordre des éléments dans votre fichier HTML déterminera l'ordre d'empilement. Si vous voulez qu'un élément soit au-dessus d'un autre, assurez-vous qu'il figure plus tard dans le code HTML.

Vous ne pouvez permuter l'ordre de superposition que sur des éléments qui se trouvent tous dans le même élément conteneur. Par exemple, si vous avez deux divs et qu'ils contiennent tous deux 3 images, vous ne pouvez pas faire d'images à partir de la seconde div sous les images de la première div.

Vous devez planifier votre code HTML si vous avez besoin d'ordres de superposition complexes.