Summary  
This chapter explains how the CSS position property (static, relative, absolute, fixed, sticky) and offset properties (top, right, bottom, left) control element placement both inside and outside the normal document flow.

General domain of usage  
Web page UI layout (e.g., pop-ups, modals, mobile menus)

Dans le développement web moderne, il est souvent nécessaire de placer des éléments en dehors du flux normal, par exemple, afficher du texte sur une carte produit, ouvrir une fenêtre contextuelle ou un modal, ou afficher un menu mobile. Tout cela est géré à l'aide de la propriété `position`.
```css
position: static | relative | absolute | fixed | sticky
```

La propriété `position` modifie la façon dont un élément est placé sur la page. Par défaut, chaque élément est en `position: static`. Une fois qu'une autre valeur est appliquée, il est également possible d'utiliser `top`, `left`, `right` et `bottom` pour contrôler son emplacement précis.
## Flux de document par défaut
Par défaut, les éléments apparaissent sur la page dans le même ordre que dans le HTML. Ce flux naturel doit être conservé sauf si un positionnement est nécessaire pour des comportements d'interface spécifiques tels que les popups, modals, menus déroulants ou menus mobiles.

Améliorez vos compétences en stylisation en maîtrisant des techniques CSS avancées pour la conception web moderne. Positionnez et gérez les éléments avec précision grâce à des stratégies de positionnement avancées. Créez des transitions fluides et des animations attrayantes pour optimiser l'expérience utilisateur. Transformez et manipulez les éléments pour des effets visuels dynamiques. Concevez des interfaces réactives qui s'adaptent à tous les appareils et rationalisez votre flux de travail avec des préprocesseurs CSS tels que Sass.

Découvrez ce que les apprenants peuvent attendre de ce cours avancé sur la mise en forme HTML et CSS. Prérequis nécessaires avant de commencer le cours. Aperçu des sujets abordés au sein du programme.

Positionnement et gestion des éléments sur les pages web. Présentation des différentes propriétés de positionnement, exploration de l'utilisation de l'ordre d'empilement pour contrôler la visibilité des éléments qui se chevauchent, et gestion du dépassement de contenu.

Étude de la puissance des transitions et amélioration de l'expérience utilisateur. Découverte de l'animation fluide et progressive des propriétés pour créer des transitions d'état sans rupture.

Découvrez la propriété animation et son utilisation pour créer des conceptions dynamiques et attrayantes. Apprenez à réaliser des animations complexes à l'aide de keyframes et à contrôler l'animation.

Découvrez la propriété de transformation, qui permet de modifier l'apparence et la position des éléments sur une page web. Apprenez à mettre à l'échelle, faire pivoter, incliner et déplacer des éléments en deux et trois dimensions. Combinez plusieurs transformations pour créer des effets plus complexes.

Les principes et techniques utilisés dans la conception adaptative/réactive visent à rendre les sites web et les applications accessibles et esthétiques sur différents appareils, tailles d'écran et orientations.

Découvrez les préprocesseurs en CSS et comment ils permettent d’écrire un code plus efficace et maintenable. Comprenez comment utiliser les préprocesseurs pour simplifier le flux de travail et générer un code CSS plus propre.

Comprendre le Positionnement CSS

Flux de document par défaut

Awesome!

Comprendre le Positionnement CSS

Flux de document par défaut