Positionnement en css

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
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

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)