Sujet Précédent Sujet Suivant

Difficulté pour superposer des DIV

Résolu/Fermé
florew - Modifié par florew le 4/02/2013 à 20:36
katsuo49 Messages postés 330 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 11 novembre 2014 - 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;   
}

1 réponse

Réponse 1 / 1
katsuo49 Messages postés 330 Date d'inscription vendredi 19 juin 2009 Statut Membre Dernière intervention 11 novembre 2014 25
8 févr. 2013 à 11:50
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
9 févr. 2013 à 17:51
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 vendredi 19 juin 2009 Statut Membre Dernière intervention 11 novembre 2014 25
11 févr. 2013 à 21:28
(désolé j'ai pas eut le temps de repasser 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
11 févr. 2013 à 22:42
Merci bcp 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 vendredi 19 juin 2009 Statut Membre Dernière intervention 11 novembre 2014 25
11 févr. 2013 à 23:43
passe en résolu si c'est bon du coup
0

Discussions similaires

Superposer 2 fichiers PDF
alexbarre -
morg -

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

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

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

12 réponses
erreur (#DIV/0) formule MOYENNE.SI.ENS
sara-87 -
sara-87 -

5 réponses