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:

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;
}

Результат:

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:

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;
}

Результат:

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:

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; /* 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:

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; /* 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;
}

Результат: