Pozycjonowanie absolutne bez współrzędnych w CSS

W rzeczywistości podawanie współrzędnych przy pozycjonowaniu absolutnym nie jest obowiązkowe. Jeśli elementowi po prostu napiszemy position z wartością absolute, to stanie się on pozycjonowany absolutnie, ale pozostanie na tym samym miejscu, gdzie stał. Przy tym wszystkie inne elementy będą zachowywać się tak, jakby naszego elementu nie było i mogą na niego nachodzić.

Spójrzmy na przykłady.

Przykład

Na początek zróbmy trzy bloki bez pozycjonowania i między nimi jakiś tekst:

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

Результат:

Przykład

A teraz dodajmy zielonemu blokowi absolute. W wyniku tego blok pozostanie na miejscu, a wszystkie elementy poniżej będą zachowywać się tak, jakby naszego elementu nie było i będą na niego nachodzić:

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

Результат:

Przykład

A teraz dodajmy właściwość left, nie dodając pozycji po pionie. W wyniku po poziomie nasz blok ustawi się na podaną wartość, a po pionie - pozostanie tam, gdzie stał:

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; /* dodajemy pozycję po poziomie */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

Przykład

Teraz dodajmy, odwrotnie, właściwość top, nie dodając pozycji po poziomie. W wyniku po pionie nasz blok ustawi się na podaną wartość, a po poziomie - pozostanie tam, gdzie stał:

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; /* dodajemy pozycję po pionie */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат: