Posicionamiento absoluto sin coordenadas en CSS
En realidad, especificar coordenadas en el posicionamiento
absoluto no es obligatorio. Si a un elemento simplemente
se le escribe position con el valor
absolute, se convertirá en un elemento posicionado absolutamente,
pero permanecerá en el mismo lugar donde
estaba. Al mismo tiempo, todos los demás elementos se
comportarán como si nuestro elemento no existiera
y podrán superponerse a él.
Veamos algunos ejemplos.
Ejemplo
Para empezar, creemos tres bloques sin posicionamiento y algo de texto entre ellos:
<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;
}
:
Ejemplo
Y ahora agreguemos absolute al bloque verde.
Como resultado, este bloque permanecerá en su lugar,
y todos los elementos debajo se comportarán como
si nuestro elemento no existiera y se superpondrán a él:
<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;
}
:
Ejemplo
Ahora agreguemos la propiedad left,
sin agregar posición vertical. Como resultado,
horizontalmente nuestro bloque se colocará en el valor
especificado, y verticalmente permanecerá
donde estaba:
<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; /* agregamos posición horizontal */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Ejemplo
Ahora, a la inversa, agreguemos la propiedad
top, sin agregar posición horizontal.
Como resultado, verticalmente nuestro bloque se colocará
en el valor especificado, y horizontalmente -
permanecerá donde estaba:
<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; /* agregamos posición vertical */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
