Positionnement des éléments
Position static (Par défaut)
Les éléments avec la position static sont positionnés dans le flux normal du document.
L'élément est positionné normalement sans être affecté par les propriétés
top, left ,right
, ou bottom.
<div class="static-box">Position static</div>
content_copy
.static-box {
/* Par défaut, la position est 'static' */
width: 150px;
height: 150px;
padding: 5px;
background-color: rgb(129, 185, 129);
border: 5px solid rgb(115, 65, 111);
}
content_copy
Rendu
Position relative (Par rapport à sa position normale)
L'élément est positionné par rapport à sa position normale dans le flux du document.
Cet élément est légèrement décalé par rapport à sa position d'origine mais
laisse l'espace de sa position normale.
<div class="relative-box">Position relative</div>
content_copy
.relative-box {
position: relative;
left: 20px; /* Déplacement par rapport à la position normale */
top: 10px;
width: 150px;
height: 150px;
padding: 5px;
background-color: rgb(129, 185, 129);
border: 5px solid rgb(115, 65, 111);
}
content_copy
Rendu
Position absolute (Par rapport à son parent positionné)
L'élément est positionné par rapport à son parent ayant une position
autre que static.
L'élément .absolute-box est positionné par rapport à son parent
.parent (ici à 10px du bord inférieur droit).
<div class="parent-absolute">
Parent (positionné)
<div> class="absolute-box">Position absolue</div>
</div>
content_copy
.parent-absolute {
width: 300px;
height: 300px;
background-color: rgb(214, 176, 127);
position: relative; /* Nécessaire pour que l'élément enfant "absolute" se positionne par rapport à ce parent */
}
.absolute-box {
position: absolute;
right: 10px; /* Positionné par rapport à son parent */
bottom: 10px;
width: 150px;
height: 150px;
padding: 5px;
background-color: rgb(129, 185, 129);
border: 5px solid rgb(115, 65, 111);
}
content_copy
Rendu
Position fixed (Par rapport à la fenêtre du navigateur)
L'élément .fixed-box restera toujours visible à 20px du bord supérieur droit, même si la page est défilée.
<div class="fixed-box">Position fixe</div>
content_copy
.fixed-box {
position: fixed;
right: 20px; /* Par rapport à la fenêtre du navigateur */
top: 100px;
width: 150px;
height: 150px;
background-color: rgb(129, 185, 129);
border: 5px solid rgb(115, 65, 111);
}
content_copy
Rendu
Position sticky (Comportement hybride entre relative et fixed)
L'élément .sticky-box se positionne de manière normale au début,
mais devient fixe lorsqu'il atteint le sommet de la page lors du défilement.
La barre de navigation de ce guide suit le même principe.
<div class="sticky-box">Position sticky</div>
content_copy
.sticky-box {
position: sticky;
top: 20px; /* L'élément devient "sticky" à 20px du haut lors du défilement */
width: 150px;
height: 150px;
background-color: rgb(129, 185, 129);
border: 5px solid rgb(115, 65, 111);
}
content_copy
inherit
Cette propriété permet à un élément de prendre la valeur de la propriété de son parent. Elle peut être utilisée pour plusieurs propriétés CSS, comme la couleur, la police, etc.
<div class="parent">
<div class="child-inherit">Cette Boîte des propriétés de son père.</div>
<div class="child-no-inherit">Cette Boîte non.</div>
</div>
content_copy
.parent {
width: 300px;
height: 180px;
background-color: rgb(129, 185, 129);
border: 5px solid rgb(115, 65, 111);
padding: 20px;
display: flex;
}
.child-inherit {
width: 150px;
height: 150px;
background-color: inherit;
border: inherit;
}
.child-no-inherit {
width: 150px;
height: 150px;
background-color:rgb(115, 65, 111);
border: 5px solid rgb(201, 164, 50);
}
content_copy
Rendu
initial
La propriété CSS initial réinitialise une propriété à sa valeur initiale par défaut, définie par le navigateur. Cela peut être utile si vous souhaitez ignorer les styles hérités ou appliqués ailleurs.
<div class="parent">
<p class="child-initial">Ce texte hérite de la couleur et de la taille du parent.</p>
<p class="child-no-initial">Ce texte est réinitialisé à la couleur et à la taille par défaut.</p>
</div>
content_copy
.parent {
color: blue;
font-size: 20px;
}
.child-inherit {
color: inherit;
font-size: inherit;
}
.child-no-inherit {
color: initial; /* Réinitialise à la couleur par défaut (généralement noire) */
font-size: initial;
}
content_copy
Rendu
Points importants à retenir
- Les éléments avec position: absolute ou fixed créent un nouveau contexte de formatage.
- z-index ne fonctionne que sur des éléments positionnés (tout sauf static).
- sticky peut ne pas fonctionner si un parent a overflow: hidden ou overflow: auto.
- Pour centrer parfaitement un élément absolu, on utilise top: 50%; left: 50%; avec transform: translate(-50%, -50%);.