Positionnement CSS : position et stacking

Introduction

La propriété CSS position contrôle comment un élément se positionne dans la page. Elle change complètement le comportement de l'élément et de ses enfants.

Position static (défaut)

C'est la valeur par défaut. L'élément suit le flux normal de la page :

.box {
    position: static;
}
/* Pas de changement. L'élément reste à sa place naturelle */

Les propriétés top, right, bottom, left n'ont AUCUN effet avec static.

Position relative — Décalage depuis la position normale

L'élément reste dans le flux MAIS est décalé par rapport à sa position naturelle :

.box {
    position: relative;
    top: 20px;
    left: 30px;
}
/* L'élément est décalé 20px vers le bas et 30px vers la droite */
/* MAIS il garde sa place dans le flux (les autres éléments le contournent) */

Utilité : Petits ajustements sans cassez le layout. Utile aussi pour créer un contexte de positionnement pour les enfants absolute.

<div class="parent" style="position: relative;">
    <div class="child" style="position: absolute; top: 0; right: 0;">
        /* Positionnement absolu RELATIF au parent relative, pas au viewport */
    </div>
</div>

Position absolute — Positionnement exact dans un contexte

L'élément est retiré du flux et positionné exactement où vous le dites, relatif à un parent position: relative/absolute/fixed :

.parent {
    position: relative;
    width: 400px;
    height: 300px;
    background: #f0f0f0;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 150px;
}
/* L'enfant est à 50px du haut et 100px de la gauche du parent */

Ancrage sur les quatre coins

/* En haut à gauche */
.box {
    position: absolute;
    top: 0;
    left: 0;
}

/* En bas à droite */
.box {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* Centré (largeur connue) */
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Position fixed — Fixe par rapport au viewport

L'élément est fixé à l'écran. Il ne bouge PAS quand on scroll :

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #333;
    z-index: 1000;
}
/* La navbar reste visible même quand on scroll */

Attention : L'élément sort du flux. Il peut cacher du contenu !

body {
    padding-top: 80px;  /* Éspace pour la navbar fixe */
}

.navbar {
    position: fixed;
    top: 0;
    height: 80px;
    z-index: 999;
}

Position sticky — Collant jusqu'à défilement

L'élément reste dans le flux, MAIS se colle au haut (ou bas) quand on le dépasse :

.section-title {
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}
/* Reste au top de l'écran quand on scroll, mais ne sort pas du parent */

Différence fixed vs sticky

/* FIXED : Sort du flux, reste à la position spécifiée toujours */
position: fixed;
top: 0;

/* STICKY : Reste dans le flux, se colle quand le parent sort */
position: sticky;
top: 0;

Z-index et stacking context

Quand deux éléments se chevauchent, lequel est devant ? z-index contrôle ça :

.background {
    position: absolute;
    z-index: 1;
}

.foreground {
    position: absolute;
    z-index: 10;
}
/* foreground est devant background */

Règles importantes

• z-index fonctionne SEULEMENT avec position: relative/absolute/fixed (pas static)
• Plus haut = devant
• Les valeurs négatives sont possibles

Ordre de stacking par défaut

/* Du plus bas au plus haut, par ordre naturel : */
1. Éléments position:static (dans le flux)
2. Éléments position:relative avec z-index négatif
3. Éléments position:relative sans z-index (dans le flux)
4. Éléments position:absolute/fixed avec z-index négatif
5. Éléments position:absolute/fixed sans z-index
6. Éléments avec z-index positif (du plus bas au plus haut)

Top, right, bottom, left — Les offsets

Ces propriétés indiquent la distance depuis les bords :

.box {
    position: absolute;
    top: 20px;      /* 20px du haut */
    right: 30px;    /* 30px de la droite */
    bottom: 40px;   /* 40px du bas */
    left: 50px;     /* 50px de la gauche */
}

Stretch complètement

.fullscreen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/* Occupe tout le parent */

Avec largeur/hauteur

.box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 150px;
}
/* 200x150 pixels, à 50px du haut/gauche */

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Exemples pratiques complets

Exemple 1 : Badge sur une image

<div class="product-card">
    <img src="product.jpg" alt="Produit">
    <span class="badge">Nouveau</span>
</div>

<style>
.product-card {
    position: relative;
    width: 200px;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4444;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
}
</style>

Exemple 2 : Navbar fixe avec contenu

<nav class="navbar">
    <div class="logo">Logo</div>
    <div class="menu">Menu items</div>
</nav>

<main class="content">
    <!-- Contenu principal -->
</main>

<style>
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #333;
    color: white;
    z-index: 999;
}

.content {
    padding-top: 80px;  /* Espace pour la navbar */
    margin: 0;
}
</style>

Exemple 3 : Dropdown menu

<div class="dropdown">
    <button class="dropdown-toggle">Menu</button>
    <div class="dropdown-menu">
        <a href="#">Option 1</a>
        <a href="#">Option 2</a>
        <a href="#">Option 3</a>
    </div>
</div>

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 0;
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
}
</style>

Conclusion

Maîtriser position est crucial pour les layouts avancés. Chaque valeur a son utilité.