Propriété CSS position

La propriété position spécifie la position de l'élément dans un document.

Cette propriété a les valeurs suivantes:

static
fixed
absolute
relative
sticky

Positionnement a les types suivants:

Éléments positionnés - lorsqu'un élément est positionné, sa position sur la page est déterminée en utilisant les propriétés de décalage: top, right, bottom, and left. Les propriétés de décalages ne fonctionnent pas sur les éléments statiques.

Éléments positionnés de façon relative- la valeur de la position est "relative". Les propriétés top et bottom spécifient le décalage vertical de sa position normale ; les propriétés left et right spécifie le décalage horizontal.

Éléments positionnés de façon absolue- la valeur de la position est "absolute" ou "fixed". Les propriétés top, right, bottom et left spécifies les décalages des bords du bloc contenant de l'élément.

Éléments positionnés en adhérence - la valeur de la position est "sticky". Elle est traitée comme un mélange des éléments "relative" et "fixed" .

Valeur initiale	static
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	Object.style.position = "sticky";

Syntaxe

position: static | absolute | fixed | relative | sticky | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      position: absolute;
      left: 40px;
      top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété position</h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p>
  </body>
</html>

Essayez-vous-même!

Un autre exemple qui contient tous les valeurs:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      #box1 {
      position: static;
      border: 2px solid #666;
      width: 300px;
      height: 100px;
      }
      #box2 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box3 {
      position: relative;
      border: 2px solid #666;
      width: 300px;
      height: 100px;
      }
      #box4 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box5 {
      position: absolute;
      border: 2px solid #666;
      width:320px;
      height: 100px;
      top: 750px;
      right: 25px;
      }
      #box6 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box7 {
      position: fixed;
      border: 2px solid #8ebf42;
      background-color: #eee;  
      width: 300px;
      height: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      }
      #box8 {
      position: absolute;
      border: 2px solid #666;
      top: 70px;
      right: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété position</h2>
    <h3>Position: static</h3>
    <p>L'élément Box1 reste dans le flux naturel de la page et ne agit pas comme un point d'ancrage pour l'élément Box2  positionné de façon absolue :</p>
    <div id="box1">
      Box1: position: static.
      <div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: relative</h3>
    <p>L'élément Box3 reste dans le flux naturel de la page et aussi agit comme un point d'ancrage pour l'élément Box4 positionné de façon absolue:</p>
    <div id="box3">
      Box3: position: relative.
      <div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: absolute</h3>
    <p>L'élément Box5 ne restee pas dans le flux naturel de la page.
      Il se positionne lui-même à l'acêtre positionné le plus proche et aussi agit comme un point d'ancrage pour l'élément Box6 positionné de façon absolue:
    </p>
    <div id="box5">
      Box5: position: absolute, top: 750px, right: 15px.
      <div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: fixed</h3>
    <p>L'élément Box7 ne reste pas dans le flux naturel de la page et se positionne lui-même selon la zone d'affichage et agit comme un point d'ancrage pour l'élément Box8 positionné de façon absolue:</p>
    <div id="box7">
      Box7: position: fixed, bottom: 0, left: 0, right: 0.
      <div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
    </div>
  </body>
</html>

Essayez-vous-même!

L'exemple donné contient toutes les valeurs de la propriété position.

Valeurs

Valeur	Description
static	Éléments sont placés selon le flux normal du document. C'est la valeur initiale de cette propriété.
absolute	Éléments sont retirés du flux du document et sont positionnés de façon relative à ses éléments ancêtres.
fixed	Éléments sont retirés du flux du document et sont positionnés de façon relative à la fenêtre du navigateur.
relative	L'éléments est placé de façon relative à sa position normale.
sticky	Éléments sont positionnés selon le flux normal du document, et ensuite ils décalent relativement à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement et au bloc englobant.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.