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 :
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#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 :
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#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 :
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#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 :
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#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;
}
:
