Avant de faire le CSS, commençons par un rappel sur "position: absolute"
Quand un élément (ici l'image) a « position: absolute », il n'affecte plus du tout le positionnement des autres éléments ou texte autour. Il s'affiche donc « par-dessus » ou « par-dessous » les éléments l'entourant.
Tout seul « position: absolute » n'est pas très utile. Par contre, une fois qu'un élément est « position: absolute », on peut le déplacer facilement avec les propriétés « top, left, right, bottom »:
Les coordonnées "top,left,bottom et right" sont relatives au "block contenant" ("containing block").
Si rien de particulier est fait, le "containing block" est la page.Tout block qui a "position:absolute" ou bien "position: relative" devient lui-même un "containing block"
Quand on veut juste transformer un block en "containing block", on ne peut pas utiliser "position:absolute", car il change l'affichage du block.On utilise donc "position: relative.