26851 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde , s'il vous plais je veux qu'une balise div reste toujours prisoner dans une autre div même que je change la position en utilisant ("position absolue", "left", 'top', z-index=2) upload/1567862220-76950-captureques.png

J'ai essayé
div.map {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.choixpos {
position: absolute;
top: 80px;
right: 0;
z-index: 2;
top: 100%;
left: 100%;
border: 3px solid #73AD21;
}
Modifié par zakariaCh (07 Sep 2019 - 15:19)
Administrateur
Bonjour,

si tu veux que l'élément superposé soit positionné en haut à gauche de ta carte, c'est top: 0; left: 0;
On peut lire / interpréter ça comme "le bord vertical de référence du parent positionné (la carte) est celui du haut et on s'en éloigne de 0. À cet endroit on place le bord haut de l'élément. Idem horizontalement, référence = left pour les 2 éléments".
Avec ton code actuel, tu te places par rapport au bord vertical de référence qui est le haut, à 100% de la hauteur de la carte donc juuuuste en bas de celle-ci (à l'extérieur). C'est parfois exactement ce qu'on cherche à faire (principalement pour faire apparaître un élément depuis un bord) mais là c'est 0 Smiley smile
bottom: 10px; positionnerait le bord bas à 10px du bas de la carte parente.
MDN a écrit :
la propriété bottom définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.
 : MDN est plus concis que moi Smiley smile

EDIT2 : s'il n'y que ces 2 éléments de positionnés, nul besoin de z-index.
Et pour le jour où ça devient trop compliqué, la lecture indispensable à propos de z-index est Comprendre z-index en CSS.
Modifié par Felipe (07 Sep 2019 - 16:45)
Meilleure solution