Propriété de position CSS | Expliqué

Les feuilles de style en cascade (CSS) se compose d'une vaste gamme de propriétés qui sont utilisées pour styliser des éléments HTML, par exemple, la propriété de couleur est utilisée pour donner du texte apparaissant sur des pages Web une couleur, l'affichage définit le comportement des éléments HTML, la propriété de la bordure définit les spécifications de la bordure d'un élément, et la liste continue. Cet article, cependant, est conçu pour éclairer la propriété de position de CSS. Ce guide couvre ce qui suit.

1. Position des biens
2. Comment attribuer un positionnement relatif à un élément HTML
3. Comment attribuer un positionnement absolu à un élément HTML
4. Comment donner une position fixe à un élément HTML

Position des biens

La propriété de position de CSS spécifie la position d'un élément HTML sur une page Web. Il a la syntaxe mentionnée ci-dessous.

Position: valeur;

Voici un exemple pour démontrer davantage la propriété de position.

Comment attribuer un positionnement relatif à un élément HTML

Cet exemple démontre la valeur relative de la propriété de position qui place un élément par rapport à sa position d'origine.

Dans cet exemple, nous plaçons une image à une certaine position en utilisant la valeur relative de la propriété de position.

Html

CSS

.image
Position: relative;
Gauche: 80%;
en haut: 0%;
hauteur: 100px;
Largeur: 200px;

Sortir

Ici, l'image est positionnée à 80% de la gauche de la page par rapport à sa position d'origine.

La position par défaut de l'image est la suivante.

Il existe certaines valeurs qui peuvent être affectées à la propriété de position de CSS, qui sont les suivantes.

Valeur	Description
statique	C'est la valeur par défaut qui place les éléments en fonction de leur position définie dans le document.
relatif	Il positionne un élément par rapport à sa position d'origine.
absolu	Il positionne un élément en référence à la position de l'ancêtre de l'élément.
fixé	Il positionne un élément par rapport à la fenêtre du navigateur.
collant	Il positionne un élément en référence à la position de défilement de l'utilisateur.
initial	Il positionne un élément à sa valeur par défaut.
hériter	Il positionne un élément par rapport aux propriétés héritées de son élément parent.

Quelques autres exemples

Pour votre meilleure compréhension, nous avons illustré la propriété de position avec l'aide de quelques autres exemples.

Comment attribuer un positionnement absolu à un élément HTML

Cet exemple démontre la valeur absolue de la propriété de position.

Html

Div
Enfant div

Ici, deux exemples sont des éléments créés, l'un est considéré comme un parent div et l'autre comme un enfant div.

CSS

Le parent div a reçu la position relative et l'enfant div a reçu la position absolue. Comme nous le savons, la valeur absolue positionne un élément par rapport à la position de son parent donc afin que l'enfant div ait une position absolue par rapport au parent div, nous avons attribué au parent div la position relative.

Sortir

L'enfant Div a été placé à une position absolue par rapport au parent div.

Comment donner une position fixe à un élément HTML

Cet exemple démontre la valeur fixe de la propriété de position.

Html

Div jaune

Div rouge

Div vert

Nous avons créé trois éléments un par le nom jaune div, deuxième par le nom Red Div et le troisième div par le nom Green Div.

CSS

.jaune
Color d'arrière-plan: # ffe162;
Largeur: 400px;
hauteur: 500px;

.rouge
Color d'arrière-plan: # FF6464;
Largeur: 300px;
hauteur: 350px;

.vert
Color d'arrière-plan: # 91C483;
Largeur: 200px;
hauteur: 100px;
Position: fixe;
Gauche: 70%;
en haut: 50%;

p
rembourrage: 20px 0;
Texte-aligne: Centre;
Font-Family: 'Segoe UI', Tahoma, Genève, Verdana, Sans-Serif

Dans l'exemple ci-dessus, seul la div vert se voit attribuer la position fixe, par conséquent, lorsque vous faites défiler la page Web, la div vert reste fixée à sa position par rapport à la fenêtre du navigateur.

Sortir

La div vert a été attribuée avec succès le positionnement fixe.

Conclusion

La propriété de position de CSS spécifie la position d'un élément HTML sur une page Web, en outre, les valeurs que cela peut présenter sont; statique qui est la valeur par défaut, la valeur absolue positionne un élément par rapport à son élément parent, la valeur fixe positionne un élément par rapport à la fenêtre du navigateur, la valeur relative positionne un élément par rapport à sa position d'origine et la valeur collante positionne un élément avec respect de la position de défilement de l'utilisateur. La propriété de position et ses différentes valeurs sont illustrées dans cet article avec l'aide d'exemples.