Difficulté pour superposer des DIV

Résolu
florew -  
katsuo49 Messages postés 330 Date d'inscription   Statut Membre Dernière intervention   - 11 févr. 2013 à 23:43
Bonjour,

J'essaye avec la propriété z-index de superposer le div de classe "span3" ci-dessous pour qu'il apparaisse au dessus de ma Google map mais ça ne marche pas. J'ai essayer plusieurs combinaison avec les positions relatives et absolue sans résultat : le div "map" est toujours au dessus. Ou fais-je une erreur ?

Merci, 

<div class="row-fluid">
	<div class="span12" id="core">
			<div id="map">
			<div class="row-fluid" id="box">
				<div class="span3">
				<pre>
					<div class="row-fluid">
						<div class="span6">
						<pre></pre>
						</div>
						<div class="span6">
						<pre></pre>
						</div>
					</div>
				</pre>
				</div>
			</div>
			</div>
	</div>
</div>	



#map {   
 width: 100%;   
 height: 400px;   
 position: absolute;   
 z-index: -1;   
}   

#box {   
 position: relative;   
 z-index: 4;   
}
A voir également:

1 réponse

Réponse 1 / 1
katsuo49 Messages postés 330 Date d'inscription   Statut Membre Dernière intervention   25
 
Salut,
De mémoire le z-index c'est uniquement pour les objets en absolute, et évite les valeur de z-index négative, si c'est pour te donner de la marge met un élément en z-index 20 et un autre à 50 comme ça t'es tranquille.

Si ton #box est dans ton #map il est forcément "au dessus" d fait qu'il est inclu dedans. pour une vraie superposition il faut qui soit l'un à coté de l'autre au niveau html et les positionner au même endroit avec le css.

Je suis pas certain que ça t'aidera mais dit le si t'as besoin d'autre chose.
1
florew
 
Salut katsuo, effectivement mon #box est dans le #map mais il n'apparait pas au dessus lorsque j'affiche une carte avec l'API Leaflet. A ce moment là le #box disparait. Dans mon fichier leaflet.css, j'ai remarqué plusieurs class (boutton, layer, popup, etc) ayant des z-index différents. J'ai donc attribué un z-index supérieur à ceux là pour mon #box (ie. z-index : 2000) mais rien n'y fait... il n'apparait jamais lorsque je charge la map :-(

exemple de mon leaflet.css :

.leaflet-tile-pane { z-index: 2; }
.leaflet-objects-pane { z-index: 3; }
.leaflet-overlay-pane { z-index: 4; }
.leaflet-shadow-pane { z-index: 5; }
.leaflet-marker-pane { z-index: 6; }
.leaflet-popup-pane { z-index: 7; }
...
.leaflet-control {
position: relative;
z-index: 7;
pointer-events: auto;
}
...
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
0
katsuo49 Messages postés 330 Date d'inscription   Statut Membre Dernière intervention   25
 
(désolé j'ai pas eut le temps de reer par le forum avant)
Je sais pas si t'as trouvé entre temps, mais c'est possible que ça vienne directement de l'API. À ta place de testerais avec une image par exemple à la place du code de ton API. Une image tu es sur qu'elle s'insèrera correctement, du coup tu pourras placer ton div au dessus de l'autre. Ensuite tu vois pourquoi l'API affiche rien, en testant dans un fichier à part je pense. Tiens moi au courant ;)
0
florew
 
Merci b pour tes réponses. Pour finir j'ai réussi sans imbriquer les div les uns dans les autres.
0
katsuo49 Messages postés 330 Date d'inscription   Statut Membre Dernière intervention   25
 
e en résolu si c'est bon du coup
0

Discussions similaires

Superposer 2 fichiers PDF
alexbarre -
morg -

6 réponses
superposition d'images dans Word
eva0 -
Aria -

13 réponses
Superposé photo avec transparence
minime17 -
moiii -

12 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Superposer une image en transparence Paint
nulle en info -
Tibtib -

12 réponses