Positionnement absolu sans coordonnées en CSS

En fait, spécifier des coordonnées pour le positionnement absolu n'est pas obligatoire. Si on écrit simplement position avec la valeur absolute pour un élément, alors il deviendra positionné de manière absolue, mais restera à l'endroit où il se trouvait. Pendant ce temps, tous les autres éléments se comporteront comme si notre élément n'existait pas et pourront empiéter sur lui.

Regardons cela avec des exemples.

Exemple

Pour commencer, créons simplement trois blocs sans positionnement et du texte entre eux :

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

Exemple

Maintenant, ajoutons absolute au bloc vert. En conséquence, ce bloc restera en place, et tous les éléments en dessous se comporteront comme si notre élément n'existait pas et empiéteront sur lui :

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

Exemple

Maintenant, ajoutons la propriété left, sans ajouter de position verticale. En conséquence, horizontalement, notre bloc se placera à la valeur spécifiée, et verticalement, il restera à l'endroit où il se trouvait :

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  left: 40px; /* ajout d'une position horizontale */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

Exemple

Maintenant, faisons l'inverse, ajoutons la propriété top, sans ajouter de position horizontale. En conséquence, verticalement, notre bloc se placera à la valeur spécifiée, et horizontalement, il restera à l'endroit où il se trouvait :

html<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>

css#elem1 {
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  top: 100px; /* ajout d'une position verticale */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат: