Utilisation de la position dans CSS

CSS fournit différentes propriétés pour styliser les pages Web créées dans HTML. En utilisant ces propriétés, vous pouvez concevoir différents éléments. L'une des propriétés les plus fantastiques est la «position" propriété. CSS "position»La propriété est l'une des propriétés les plus courantes et les plus essentielles utilisées pour ajuster la position des éléments HTML.

Ce manuel vous guidera sur la propriété Position CSS. Alors, commençons.

Quelle est la propriété «position» CSS?

Dans CSS, le «position”Est ​​utilisé pour spécifier où un élément apparaît sur la page en fonction de sa position. Le combiner avec les propriétés CSS supérieur, droite, inférieure et gauche détermine où l'élément sera placé.

Syntaxe

La syntaxe de la propriété de position CSS est donnée ci-dessous:

position: valeurs

À la place de "valeur», Vous pouvez définir la position des éléments comme«statique","relatif","absolu", et "fixé".

Examinons de plus près chaque valeur avec des exemples pour comprendre comment ils affectent la position des éléments de la page.

Exemple

Dans HTML, nous ajouterons deux conteneurs à l'intérieur de la balise corporelle et attribuerons le nom de classe au premier div en tant que «div1"Et la deuxième div comme"div2»:

Div 1
Div 2

Après cela, nous allons styliser le corps de la page Web en utilisant «corps«Dans CSS et définissez la couleur d'arrière-plan du corps comme«RVB (127, 255, 212)»:

corps
Color en arrière-plan: RVB (127, 255, 212);

On peut voir que la couleur d'arrière-plan est appliquée sur la page Web:

Dans notre fichier CSS, utilisez "div«Pour appliquer les mêmes propriétés aux conteneurs à la fois. Ajustez la largeur et la hauteur de la div comme «100px"Et la marge comme"30px". Pour définir la forme des divs, utilisez le «rayon frontalier«Propriété et définit sa valeur comme«30px". Ensuite, ajustez le texte de la div en utilisant le «alignement de texte»Propriété pour définir le texte DIV au«centre«Position et le«hauteur de la ligne«Propriété comme«100px»:

div
Largeur: 100px;
hauteur: 100px;
marge: 30px;
Border-Radius: 10px;
Texte-aligne: Centre;
hauteur de ligne: 100px;

Après cela, définissez la couleur du div pour les différencier. Pour ce faire, utilisez ".div1«Pour accéder au premier div et définir sa couleur d'arrière-plan comme«RVB (236, 226, 128)»:

.div1
Color en arrière-plan: RVB (236, 226, 128);

Maintenant, utilisez «.div2«Pour accéder au deuxième div et définir sa couleur d'arrière-plan comme«RVB (187, 166, 214)»:

.div2
Color en arrière-plan: RVB (187, 166, 214);

Le résultat du code ci-dessus est donné ci-dessous:

Quelle est la position «statique» dans CSS?

"statique”Est ​​utilisé pour définir la position par rapport au flux de page normal. Il est défini par défaut. De plus, les propriétés en haut, en bas, à gauche et à droite n'ont aucun effet.

Exemple

Ici, nous allons définir la position des deux div comme statique. Notez que toutes les autres propriétés des deux conteneurs resteront les mêmes:

.div1
…
Position: statique;

.div2
…
Position: statique;

Vous pouvez voir que les Divs sont positionnés à leur position d'origine:

Quelle est la position «relative» dans CSS?

Afin de définir la position de l'élément par rapport à sa position normale, le «relatif«La valeur de la propriété de position est utilisée.

Exemple

Nous allons définir la position de "div1" comme "relatif" et "div2" comme "absolu". Ici, la deuxième div est positionnée selon la div1:

.div1
…
Position: relative;

.div2
…
Position: absolue;

Voici le résultat qui démontre que Div2 est ajusté en fonction de la position de Div 1:

Quelle est la position «fixe» dans CSS?

Les éléments HTML peuvent être fixés sur le navigateur en utilisant le «fixé»Valeur de la propriété de position. La position des éléments fixes est déterminée par la fenêtre, la zone du document visible pour le moment. En utilisant la fenêtre du navigateur comme référence, cet élément fixe est positionné par rapport à lui.

Exemple

Nous allons définir la position de "div1" comme "fixé" et "div2" comme "statique". Ici, nous utiliserons la valeur statique pour définir la position de «div2"Selon le flux de page normal:

.div1
…
Position: fixe;

.div2
…
Position: statique;

Ici, vous pouvez voir que la position de «div1"Est fixe et"div2"Est défini en fonction du flux de la page:

Quelle est la position «absolue» dans CSS?

Dans "absolu”Positionnement, l'élément est positionné par rapport au premier élément parent, qui n'est pas statique. De plus, un élément peut être positionné n'importe où sur une page en utilisant un positionnement absolu.

Exemple

Nous allons définir la position de "div1" comme "relatif" et "div2" comme "absolu". Après cela, nous utiliserons le «bas«Propriété comme«5px”Pour définir la div2 en bas de la page:

.div1
…
Position: relative;

.div2
…
Position: absolue;
En bas: 5px;

L'image suivante montre que la Div2 est positionnée en bas de la page:

C'est ça! Nous avons expliqué la description de la propriété de position en détail.

Conclusion

Afin de définir la position de l'élément HTML, le «position«La propriété de CSS est utilisée. La propriété de position prend en charge quatre valeurs différentes telles que statique, relative, fixe et absolue. Dans cet article, nous avons expliqué la propriété de position en détail et fourni des exemples pour toutes ses valeurs.