La propriété position

La propriété position détermine la manière dont un élément est placé dans le document. Il existe cinq modes principaux pour définir l'emplacement d'un composant.

1. static

Il s'agit de la valeur par défaut. L'élément suit le flux normal du document. Dans ce mode, les propriétés top, right, bottom et left n'ont aucun effet.

2. relative

L'élément est positionné par rapport à sa place initiale. Contrairement au mode static, l'utilisation de décalages (comme top: 10px) déplacera l'élément sans modifier l'espace qu'il occupait originellement dans le flux.

.boite-flexible {
  position: relative;
  left: 15px;
  top: 5px;
}

3. absolute

L'élément est retiré du flux normal et positionné par rapport à son ancêtre le plus proche ayant une posision autre que static. Si aucun ancêtre n'est trouvé, il se réfère au bloc de base (souvent l'élément html).

/* Structure HTML : 
   <section class="cadre-parent">
     <div class="badge-enfant"></div>
   </section> 
*/

.cadre-parent {
  position: relative;
  height: 200px;
}

.badge-enfant {
  position: absolute;
  right: 0;
  bottom: 10px;
}

4. fixed

Le positionnement est relatif à la fenêtre d'affichage (viewport). L'élément reste immobile même lors du défilement de la page.

Mise en page avec Flexbox

Le module Flexbox permet de concevoir des structures de mise en page unidimensionnelles efficaces. On active ce mode sur un conteneur via display: flex;.

Concepts clés

• Conteneur Flex : L'élément parent.
• Éléments Flex (Items) : Les enfants directs du conteneur.
• Axes : L'axe principal (main axis) et l'axe transversal (cross axis).

Propriétés du conteneur

• flex-direction : Définit l'orientation des éléments (row, column, etc.).
• flex-wrap : Indique si les éléments doivent passer à la ligne (wrap) ou rester sur une seule ligne (nowrap).
• justify-content : Aligne les éléments sur l'axe principal (center, space-between, flex-end).
• align-items : Aligne les éléments sur l'axe transversal (center, stretch, baseline).

.galerie-photos {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

Gestion de la profondeur avec z-index

La propriété z-index contrôle l'ordre d'empilement vertical des éléments positionnés (ceux ayant une position autre que static).

• Un z-index élevé place l'élément devant les autres.
• Si un parent possède un contexte d'empilement (stacking context), le z-index des enfants est limité par celui du parent par rapport aux éléments extérieurs.

Unités de mesure en CSS

Unités Absolues

Le px (pixel) est l'unité absolue la plus courante. Elle est fixe et ne dépend pas des autres éléments ou de la configuraton du navigateur.

Unités Relatvies

Ces unités s'adaptent selon un contexte spécifique :

• em : Relatif à la taille de la police de l'élément parent. ``` .liste-parent { font-size: 20px; } .item-enfant { font-size: 1.5em; } /* Résultat : 30px */

• rem : Relatif à la taille de la police de la racine (html), généralement 16px par défaut.
• % : Pourcentage par rapport à la dimension correspondante de l'élément parent.
• vw & vh : Pourcentage de la largeur (vw) ou de la hauteur (vh) de la fenêtre d'affichage. 100vh correspond à la hauteur totale de l'écran visible.