z-index entre les Enfants et les Parents
Je vais avoir des problèmes en travaillant sur le z-index pour qu'une demande, nous travaillons sur l', j'ai deux racine parents, une barre de navigation et une carte, et un enfant, la carte info-bulle. La barre de navigation doit être visible au-dessus de la carte, de sorte qu'il a un z-index supérieur, mais le problèmes est de faire de l'info-bulle dans la carte conteneur à être affichée sur la barre latérale ainsi, un peu difficile à expliquer, de sorte que vous pouvez visualiser le cas sur http://jsbin.com/afakak/2/edit#javascript,html,vivre :
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
Merci pour toute aide.
- Si vous supprimez le
z-index
de lamap-container
, et de le modifier pourposition: absolute
, et ajouterposition: absolute
de l'info-bulle, l'ordre de la pile semble aller pour le mieux: jsbin.com/qaquxiyufa/1/edit?html,sortie Seulement je ne comprends pas pourquoi... (Et je suppose que ce n'est pas acceptable pour vous...)
Vous devez vous connecter pour publier un commentaire.
Si
#map-container
est positionné (non statique), ce n'est pas possible, en raison de la façon dont le z-index est comparé:body
(ou toute autre est placé élément parent) est la référence pour les deux#map-container
et#nav-bar
. Toutz-index
vous leur donnez est calculée relativement à l'élément parent. Si l'un des 2 éléments avec le z-index supérieur sera rendu au-dessus de l'autre et de tous ses éléments enfants. Z-index de#tooltip
ne seront comparés avec d'autres enfants de#map-container
.Vous pourriez faire comme Nacho dit et de façon statique en position
#map-container
. Vous pouvez simuler la correction du positionnement via Javascript, si vous le souhaitez.Si vous ne pouvez pas faire cela, vous avez besoin de changer votre balisage, de sorte que
#nav-bar
et#tooltip
commune positionné élément parent. Déplacer#nav-bar
à l'intérieur de#map-container
, ou#tooltip
hors de lui.Ci-dessous la solution de travail, mais je ne sais pas si vous avez une exigence particulière, comme garder les
nav-bar
à l'extérieurmap-container
. Si donc je ne pense pas qu'il y est une solution de contournement pour que.CSS:
HTML:
Vous devez absolument position
nav-bar
ettooltip
(sinon z-index ne sera pas prise en compte), et de maintenirmap-container
statique placétooltip
dans votre page. Avez-vous changer de position absolue?Je pense que la seule façon vous pouvez le faire avec un
position: fixed
sur le#map-container
est de restructurer votre outil de conseils pour l'affichage à l'extérieur de la#map-container.
Ainsi de suite cliquez sur l'icône de "l'intérieur" de la carte conteneur, l'info-bulle est affiché au-dessus de deux (avec un bonz-index
set).Après, vos codes, je l'ai remarqué.
Votre #info-bulle a un z-index, mais il n'est pas positionné. Propriété Z-index ne fonctionne que si elle est a un de la position la valeur de la propriété. Et compte tenu que vous voulez l'info-bulle pour se démarquer, vous devez utiliser la position absolue de la valeur de ce genre.
HTML
Cela permet de maintenir le #info-bulle sur le dessus....
Pour les futurs lecteurs à des problèmes similaires -
Si votre enfant en conflit éléments sont
position: fixed
, envisager de régler la hauteur de conteneurs parent à 0px, puis déplace tout parent d'arrière-plan de l'affichage des paramètres sur une mutuelle grands-parents des enfants en conflit.Cela a résolu mon analogues delimma.
Si, dans le réel, la page de
tooltip
doit être affiché uniquement sur le curseur de la carte conteneur, vous pouvez simplement modifier dynamiquement son z-index de la sorte:Sinon, vous devez modifier la position de la
tooltip
de sorte que lenav-bar
n'est pas le chevauche.