Positionnement en CSS

Le positionnement est l'une des propriétés les plus importantes du CSS, car il permet de positionner les éléments HTML à différents endroits de la page. Il existe quatre principaux types de positionnement en CSS : statique, relatif, absolu et fixe.

Positionnement statique

Le positionnement statique est la valeur par défaut pour tous les éléments HTML. Dans ce type de positionnement, l'élément est positionné selon le flux normal du document. C'est-à-dire que l'élément est positionné dans l'ordre dans lequel il apparaît dans le code HTML.

Positionnement relatif

Avec le positionnement relatif, l'élément est positionné par rapport à sa position normale. Cela signifie que l'élément occupe toujours son espace normal dans le flux de documents, mais peut être déplacé vers le haut, le bas, la gauche ou la droite par rapport à sa position normale.

Pour définir le positionnement relatif en CSS, nous utilisons la propriété "position" avec la valeur "relative". De plus, on peut utiliser les propriétés "top", "bottom", "left" et "right" pour définir le décalage de l'élément par rapport à sa position normale.

Positionnement absolu

En positionnement absolu, l'élément est positionné par rapport à l'élément parent le plus proche ayant une position définie. Cela signifie que l'élément ne prend pas de place dans le flux de documents et peut être placé n'importe où sur la page.

Pour définir le positionnement absolu en CSS, nous utilisons la propriété "position" avec la valeur "absolue". De plus, nous pouvons utiliser les propriétés "top", "bottom", "left" et "right" pour définir la position de l'élément par rapport à l'élément parent.

Positionnement fixe

Avec un positionnement fixe, l'élément est positionné par rapport à la fenêtre du navigateur. Cela signifie que l'élément reste au même endroit même si la page défile.

Pour définir un positionnement fixe en CSS, nous utilisons la propriété "position" avec la valeur "fixed". De plus, nous pouvons utiliser les propriétés "top", "bottom", "left" et "right" pour définir la position de l'élément par rapport à la fenêtre du navigateur.

Indice Z

Le z-index est une propriété CSS qui définit l'ordre d'empilement des éléments positionnés. Autrement dit, il détermine quel élément apparaît devant ou derrière d'autres éléments.

Pour définir le z-index en CSS, nous utilisons la propriété "z-index" avec une valeur numérique. Plus la valeur est élevée, plus l'élément apparaîtra haut dans la pile des éléments positionnés.

Conclusion

Le positionnement dans CSS est une propriété importante qui permet de positionner les éléments HTML à différents endroits sur la page. Avec la connaissance des quatre principaux types de positionnement et de la propriété z-index, il est possible de créer des mises en page complexes et intéressantes pour votre page Web.

Répondez maintenant à l’exercice sur le contenu :

_Quel est le type de positionnement dans lequel l'élément est positionné par rapport à l'élément parent le plus proche qui a une position définie ?

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Image de l'article Couleurs en CSS

Page suivante de lebook gratuit :

8Couleurs en CSS

3 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !

Get it on Google Play Get it on App Store

+ 6,5 millions
d'étudiants

Certificat gratuit et
valide avec QR Code

48 mille exercices
gratuits

Note de 4,8/5 dans les
magasins d'applications

Cours gratuits en
vidéo, audio et texte