La position relative est la position de base de la page et des éléments.
(Le « body » est de base relative)
Position absolute: l’élément se place où on veut. De base en haut à gauche.
Les éléments en absolute s’entassent au même endroit !
Position fixed: l’élément reste figé même si scroll.
Position sticky : l’élément se déplace lors du scroll jusqu’à un point précis, où il se fixe.
de base :
position : absolute
top: 0
left: 0
Pour qu’un bloc « morde » sur un autre bloc: utiliser position relative et coordonnées:
.contact-container {
display: flex;
flex-direction: row;
max-width: 1200px;
background-color: #eee;
position: relative;
bottom: 80px;
}
résultat: bloc gris mord sur la carte:
