4.1 absolute positioning
Le positionnement absolu (absolute positioning) en CSS permet de contrôler précisément l'emplacement des éléments sur une page web. Avec le positionnement absolu, un élément est retiré du flux normal du document et est placé par rapport à l'ancêtre positionné le plus proche. S'il n'y a pas d'ancêtre, l'élément est positionné par rapport au conteneur initial (généralement <html> ou <body>).
Principales caractéristiques du positionnement absolu :
- Retrait du flux du document : les éléments positionnés de manière absolue n'affectent pas les autres éléments et ne sont pas pris en compte lors du calcul des dimensions des éléments parents.
- Positionnement relatif : les éléments sont placés par rapport à l'ancêtre le plus proche ayant un positionnement relatif (
position: relative), absolu (position: absolute), fixe (position: fixed) ou collant (position: sticky). - Utilisation des coordonnées : les propriétés
top,right,bottometleftsont utilisées pour définir la position exacte de l'élément.
Exemple de positionnement absolu de base
Voyons un exemple simple avec le positionnement absolu d'un élément :
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
<div class="container">
<div class="box">Absolute Box</div>
</div>
Dans cet exemple, l'élément .box est positionné par rapport au conteneur parent .container, qui a position: relative;.
4.2 Création de superpositions (overlays)
Le positionnement absolu est souvent utilisé pour créer des superpositions, comme des fenêtres modales, des infobulles et des lightboxes.
Exemple de positionnement absolu :
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Modal Content</p>
</div>
</div>
</div>
4.3 Layouts précis et composants d'interface
Le positionnement absolu est utile pour créer des layouts précis, tels que les contrôles dans les lecteurs multimédias, les contrôles personnalisés et les barres d'outils.
Exemple de positionnement absolu :
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
<div class="player">
<div class="play-button">Play</div>
<div class="volume-control">Volume</div>
</div>
4.4 Création de layouts complexes
Le positionnement absolu permet de créer des layouts complexes, tels que des tableaux de bord et des éléments interactifs.
Exemple de positionnement absolu :
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
GO TO FULL VERSION