Positionnement en CSS
Page 7 | Écouter en audio
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.
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 !
