26787 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)
Tu peux masquer ce qui dépasse de .map avec overflow:hidden si c'est le sens de ta question.
Non je veux que les deux restent toujours superposées, l'une au dessus de l'autre
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