Posicionamento absoluto sem coordenadas em CSS
Na verdade, especificar coordenadas no posicionamento
absoluto não é obrigatório. Se você simplesmente escrever
position com o valor
absolute para um elemento,
ele se tornará posicionado absolutamente,
mas permanecerá no mesmo lugar onde
estava. Enquanto isso, todos os outros elementos
se comportarão como se o nosso elemento não existisse
e poderão sobrepor-se a ele.
Vamos ver alguns exemplos.
Exemplo
Para começar, vamos criar três blocos sem posicionamento e algum texto entre eles:
<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;
}
:
Exemplo
Agora vamos adicionar absolute ao bloco verde.
Como resultado, este bloco permanecerá no lugar,
e todos os elementos abaixo se comportarão como
se o nosso elemento não existisse e se sobreporão a ele:
<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;
}
:
Exemplo
Agora vamos adicionar a propriedade left,
sem adicionar a posição vertical. Como resultado,
na horizontal o nosso bloco será posicionado no valor
especificado, e na vertical - permanecerá
onde estava:
<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; /* adicionamos a posição horizontal */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Exemplo
Agora, vamos fazer o contrário: adicionar a propriedade
top, sem adicionar a posição horizontal.
Como resultado, na vertical o nosso bloco será
posicionado no valor especificado, e na horizontal -
permanecerá onde estava:
<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; /* adicionamos a posição vertical */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
