La propriété position de CSS est utilisée pour définir la position d’un élément. il est également utilisé pour placer un élément derrière un autre et est également utile pour un effet d’animation scripté.
Vous pouvez positionner un élément en utilisant les propriétés top, bottom, left et right. Ces propriétés ne peuvent être utilisées qu’après que la propriété position a été définie en premier. La propriété de position calculée d’un élément de position est relative, absolue, fixe ou collante.
Regardons le positionnement CSS suivant:
- Static
- Fixed
- Relative
- Absolute
1) Positionnement statique
C’est une position par défaut pour les éléments HTML. Il positionne toujours un élément en fonction du flux normal de la page. Il n’est pas affecté par les propriétés top, bottom, left et right.
2) Positionnement fixe
La propriété de positionnement fixed permet de placer le texte sur le navigateur. Ce texte fixe est positionné par rapport à la fenêtre du navigateur et ne bouge pas même lorsque vous faites défiler la fenêtre.
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
position: fixed;
top: 50px;
right: 5px;
color: blue;
}
</style>
</head>
<body>
<p>texte...</p><p>texte...</p><p>texte...</p><p>........</p><p>.... ...</p>
<p>........ </p>
<p>........</p><p>........</p><p>texte...</p><p>texte...</p><p>texte...</p>
<p class="pos_fixed">texte positionné par la propriété fixed.</p>
</body>
</html>
Résultat:
3) Positionnement relatif
La propriété de positionnement relative est utilisée pour définir l’élément par rapport à sa position normale.
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {
position: relative;
left: -30px;
}
h2.pos_right {
position: relative;
left: 30px;
}
</style>
</head>
<body>
<h2>Ceci est une rubrique sans position</h2>
<h2 class="pos_left">Cette rubrique est positionnée à gauche en fonction de sa position normale</h2>
<h2 class="pos_right">Cette rubrique est positionnée correctement selon sa position normale</h2>
<p>Le style "left: -30px" soustrait 30 pixels de la position gauche d'origine de l'élément.</p>
<p>Le style "left: 30px" ajoute 30 pixels à la position gauche d'origine de l'élément.</p>
</body>
</html>
Résultat :
4) Le positionnement absolu
Le positionnement absolu (absolute) permet de positionner un élément par rapport au premier élément parent ayant une position autre que statique. Si aucun élément de ce type n’est trouvé, le bloc conteneur est HTML.
Avec le positionnement absolu, vous pouvez placer un élément n’importe où sur une page.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
position: absolute;
left: 150px;
top: 250px;
}
</style>
</head>
<body>
<h2>Cette rubrique a une position absolue</h2>
<p>Le titre ci-dessous est placé à 150 pixels de la gauche et 250 pixels du haut de la page.</p>
</body>
</html>
Résultat :
Toutes les propriété CSS de Position
| No. | propriété | description | valeurs |
|---|---|---|---|
| 1) | bottom | Il est utilisé pour définir le bord inférieur de la marge pour une boîte positionnée. | auto, length, %, inherit |
| 2) | clip | Il est utilisé pour couper un élément en position absolue. | shape, auto, inherit |
| 3) | cursor | Il est utilisé pour spécifier le type de curseurs à afficher. | url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help |
| 4) | left | Il définit un bord de marge gauche pour une boîte positionnée. | auto, length, %, inherit |
| 5) | overflow | Cette propriété est utilisée pour définir ce qui se passe si le contenu déborde de la boîte d’un élément. | auto, hidden, scroll, visible, inherit |
| 6) | position | Il est utilisé pour spécifier le type de positionnement d’un élément. | absolute, fixed, relative, static, inherit |
| 7) | right | Il est utilisé pour définir un bord de marge droite pour une boîte positionnée. | auto, length, %, inherit |
| 8) | top | Il est utilisé pour définir un bord de marge supérieure pour une boîte positionnée. | auto, length, %, inherit |
| 9) | z-index | Il est utilisé pour définir l’ordre de pile d’un élément. | number, auto, inherit |