Difficulté pour superposer des DIV
Résolu
florew
-
katsuo49 Messages postés 330 Date d'inscription Statut Membre Dernière intervention -
katsuo49 Messages postés 330 Date d'inscription Statut Membre Dernière intervention -
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,
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:
- Difficulté pour superposer des DIV
- Div c++ - Télécharger - Langages
- Comment superposer deux images sur word - Forum Graphisme
- Comment superposer des images dans Microsoft Word - Forum Word
- Remplacer #div/0 par vide ✓ - Forum Excel
- Superposer deux images transparence ✓ - Forum Graphisme
1 réponse
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.
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.
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;
}
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 ;)