3.1 position: relative
Le positionnement relatif en CSS permet aux éléments de se déplacer par rapport à leur position initiale dans le flux du document. En utilisant position: relative, l'élément conserve sa place dans le flux normal, mais peut être décalé à l'aide des propriétés top, right, bottom et left. Ces propriétés permettent de déplacer l'élément par rapport à sa position habituelle.
Principes de base du positionnement relatif
Dans le positionnement relatif (position: relative), l'élément est déplacé de sa position initiale dans le flux du document. Ce décalage n'affecte que l'élément lui-même, les autres éléments restent à leur place, comme si l'élément n'avait pas été déplacé. Cela permet de créer des effets où les éléments se superposent ou créent des marges visuelles supplémentaires.
Syntaxe :
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
Où :
top: déplace l'élément vers le bas par rapport à sa position normaleright: déplace l'élément vers la gauche par rapport à sa position normalebottom: déplace l'élément vers le haut par rapport à sa position normaleleft: déplace l'élément vers la droite par rapport à sa position normale<valeur>: peut être n'importe quelle valeur de longueur valide en CSS (px,%,emetc.)
3.2 Propriété top
La propriété top déplace l'élément vers le bas par rapport à sa position initiale.
Exemple d'utilisation de top :
.relative-top {
position: relative;
top: 20px; /* Déplace l'élément vers le bas de 20 pixels */
}
Exemple d'utilisation :
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
<div class="container">
<div class="box static-box">Ceci est un bloc ordinaire</div>
<div class="box relative-top">Ce bloc sera déplacé vers le bas de 20px.</div>
<div class="box static-box">Ceci est un bloc ordinaire</div>
</div>
3.3 Propriété right
La propriété right déplace l'élément vers la gauche par rapport à sa position initiale.
Exemple d'utilisation de right :
.relative-right {
position: relative;
right: 20px; /* Déplace l'élément vers la gauche de 20 pixels */
}
Exemple d'utilisation :
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
<div class="container">
<div class="box static-box">Ceci est un bloc ordinaire</div>
<div class="box relative-right">Ce bloc sera déplacé vers la gauche de 20px.</div>
<div class="box static-box">Ceci est un bloc ordinaire</div>
</div>
3.4 Propriété bottom
La propriété bottom déplace l'élément vers le haut par rapport à sa position initiale.
Exemple d'utilisation de bottom :
.relative-bottom {
position: relative;
bottom: 20px; /* Déplace l'élément vers le haut de 20 pixels */
}
Exemple d'utilisation :
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
<div class="container">
<div class="box static-box">Ceci est un bloc ordinaire</div>
<div class="box relative-bottom">Ce bloc sera déplacé vers le haut de 20px.</div>
<div class="box static-box">Ceci est un bloc ordinaire</div>
</div>
3.5 Propriété left
La propriété left déplace l'élément vers la droite par rapport à sa position initiale.
Exemple d'utilisation de left :
.relative-left {
position: relative;
left: 20px; /* Déplace l'élément vers la droite de 20 pixels */
}
Exemple d'utilisation :
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
<div class="container">
<div class="box static-box">Ceci est un bloc ordinaire</div>
<div class="box relative-left">Ce bloc sera déplacé vers la droite de 20px.</div>
<div class="box static-box">Ceci est un bloc ordinaire</div>
</div>
3.6 Interaction avec les éléments adjacents
Les éléments avec position: relative restent dans le flux normal du document, ce qui signifie qu'ils occupent toujours l'espace qu'ils auraient occupé s'ils n'avaient pas été décalés. Cela permet de décaler les éléments sans modifier la disposition des autres éléments sur la page.
Exemple d'utilisation :
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
<div class="container">
<div class="box box1">Élément 1 (déplacé vers le bas)</div>
<div class="box box2">Élément 2 (déplacé vers la droite)</div>
<div class="box">Élément 3 (position normale)</div>
</div>
Explication du code :
-
.box1: l'élément est déplacé vers le bas de 20 pixels, mais sa place dans le flux normal reste, ce qui signifie que les autres éléments se positionneront par rapport à sa position initiale -
.box2: l'élément est déplacé vers la droite de 20 pixels, mais sa place dans le flux normal reste
GO TO FULL VERSION