Un autre mode de

display: position
Déplacer les objets avec
position
Layout positionné vous permet de définir
précisément où un élément doit se trouver dans
la page (mdn).
Vous pouvez utiliser un layout positionnée en
procédant comme suit:
1. Définir un type de position:
Static, fixed, absolute, relative
2. Définier les offsets (décalage): top,
left, bottom, and right
3. (optionel) Définir z-index pour les calques
qui se chevauchent (mdn)
Déplacer les objets avec
position
Pour spécifier exactement la position d’un élément,
définissez son décalage top, left, bottom, et/ou
right.

La signification de ces valeurs de décalage

dépend du point de référence défini par la
position:
- static: pas de point de référence; le bloc
statique ne peut pas bouger (style par défaut)
- fixed: une position fixe dans la fenêtre
- absolute: une position fixe dans son « élément
contenant »
position: static
(nothing happens!)

- static est la valeur par défaut de la position

- Si vous utilisez top / left / bottom / right
sans définir une position non statique, rien
ne se passera
 position: fixed

#menubar {
position: 50px
fixed;
top: 50px;
right: 100px;
} 100px
- Pour le positionnement
fixed, le décalage est la
distance de
positionnement relative à
la fênetre
- L'élément ne bouge pas
lorsqu'il défile. Souvent utilisé pour
- L'élément est supprimé du implémenter les
flux de documents interfaces utilisateur;
normal, positionné sur son barres de contrôle qui ne
propre calque devraient pas disparaître
position: fixed

(CodePen
)
 position: absolute

#menubar {
position: absolute; 50px

left: 400px;
top: 50px;
} 400px
- Pour le positionnement
absolute, le décalage
est la distance par
rapport à "l'élément
conteneur", qui est
l'élément html par
défaut.
- L'élément est supprimé
du flux de documents
normal, positionné sur
son propre calque
 position: absolute

(CodePen
position: relative
Pour la position: relative; ; l'élément est placé là
où il serait normalement placé dans la mise en page de
la page, mais décalé des valeurs top / left / bottom
/ right.

(CodePen)
Positionnement absolu relatif
Revisitons la définition du positionnement
absolu:
- absolute: une position fixe dans son
"élément contenant
- L'élément conteneur est la fenêtre par
défaut
Vous pouvez modifier l'élément contenant en
définissant "position: relative;" sur un parent de
votre élément absolument positionné!
 Positionnement absolu relatif

#area2 {
position:
relative; 50px

}
#menubar {
position: absolute;
400px

left: 400px;
top: 50px;
}

Les décalages sont relatifs au premier élément

parent qui a la position: relative qui dans ce
cas est #area2
Cas d’étude: couverture

(CodePen)
CSS utile
calc

Vous pouvez utiliser la fonction CSS calc pour

définir des valeurs numériques en termes
d'expressions:

width: calc(50% - 10px);

width: calc(100% / 6);
Variables CSS

Variables sont une nouvelle fonctionnalité

CSS.

:root {
--couleur-principale: hotpink;
}

h1 {
background-color: var(--couleur-
principale);
}