Attribut POSITION

Rôle

L’attribut position permet à un élément d’échapper au flux HTML (disposition par défaut des éléments). Son positionnement peut se faire grâce à 4 attributs : left (à partir de la gauche), right (à partir de la droite), top (à partir de du haut), bottom (à partir du bas).

Il est possible de superposer les éléments qui sont en position, et gérer leurs profondeurs avec l’attribut z-index.

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.position

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

#gauche{
  background-color: silver;
  width: 200px;
  height: 100px;
  position: absolute;
  border: thin blue solid;
}
#droite{
  background-color: pink;
  width: 200px;
  height: 100px;
  position: absolute;
  left: 30px;
  top: 30px;
  border: thin red solid;
}

– Le code HTML

<div id="gauche">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div id="droite">Lorem ipsum dol</div>

Résultat

Compatibilité

L’attribut position est pris en charge par tous les principaux navigateurs .
A partir d’Internet Explorer 7.

Valeurs

Les différentes valeurs de l’attribut position sont:

static

Valeur par défaut, l’élément est disposer par le flux HTML
Syntaxe :
position : static

absolute

L’élément quitte le flux HTML, son référentiel est le premier élément parent en position ou la page par défaut
Syntaxe :
position : absolute Faites défiler le contenu vers le haut

fixed

L’élément quitte le flux HTML, son référentiel est la fenêtre du navigateur.
Syntaxe :
position : fixed Faites défiler le contenu vers le haut

relative

L’élément reste dans le flux HTML mais peut se déplacer en dehors du flux HTML par rapport à lui-même.
Syntaxe :
position : relative

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
position : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
position : inherit

A voir aussi

display– clear– z-index– flex– align-content– align-items– align-self– columns– vertical-align