Propriété position

La propriété position définit la méthode de positionnement des éléments. Cette propriété est le plus souvent utilisée conjointement avec les propriétés top, right, bottom, left, qui définissent les marges en haut, à droite, en bas, à gauche respectivement.

Syntaxe

csssélecteur {
  position: absolute | relative | fixed | static | sticky;
}

Valeurs pour position

Valeur par défaut : static.

Exemple . Positionnement absolu

Plaçons un élément dans le coin supérieur gauche de l'écran avec de petites marges :

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Exemple . Positionnement absolu

Maintenant, plaçons un élément dans le coin supérieur droit de l'écran avec de petites marges :

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Exemple . Positionnement fixe

Avec le positionnement fixe, l'élément reste en place lors du défilement :

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Exemple . Positionnement relatif

Avec le positionnement relatif, l'élément est décalé par rapport à sa position normale, mais les autres éléments se comportent comme si l'élément n'était pas décalé :

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

Exemple . Imbrication

Si la propriété position du parent a la valeur relative, alors les éléments positionnés absolument seront positionnés par rapport au parent :

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Exemple . Imbrication

Si la propriété position du parent a la valeur absolute, alors les éléments positionnés absolument seront positionnés par rapport au parent :

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Exemple . Positionnement adhésif

Si pour un élément la propriété position a la valeur sticky, alors l'élément se comporte comme relative jusqu'à ce qu'il atteigne une position donnée lors du défilement, après quoi il reste collé à l'endroit. Créons un en-tête adhésif :

html<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

Exemple . Sans position

Si un élément reçoit un positionnement absolu sans spécifier de position, alors l'élément reste à l'endroit où il était sans positionnement, mais les autres éléments cesseront de le prendre en compte :

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Exemple . Un seul axe

Avec le positionnement absolu, on peut spécifier la position seulement sur un axe. Par exemple, si nous définissons la propriété top, alors verticalement l'élément prendra la position voulue, mais horizontalement il restera à l'endroit où il était :

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Exemple . Toutes les positions

Avec le positionnement absolu, on peut spécifier les positions sur tous les côtés, sans définir la largeur et la hauteur. Dans ce cas, l'élément se placera au centre du bloc parent :

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

Voir aussi