Абсолютное позиционирование без координат в CSS

На самом деле указания координат при абсолютном позиционировании не обязательно. Если элементу просто написать position в значении absolute, то он станет абсолютно спозиционированным, но останется стоять в том же месте, где и стоял. При этом все остальные элементы будут вести себя так, будто нашего элемента нет и могут налезть на него.

Давайте посмотрим на примерах.

Пример

Для начала давайте просто сделаем три блока без позиционирования и между ними некоторый текст:

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

Результат:

Пример

А теперь давайте добавим зеленому блоку absolute. В результате этот блок останется на месте, а все элементы снизу будут вести себя так, будто нашего элемента нет и налезут на него:

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

Результат:

Пример

А теперь давайте добавим свойство left, не добавляя позицию по вертикали. В результате по горизонтали наш блок станет на указанное значение, а по вертикали - останется стоять там, где и стоял:

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; /* добавляем позицию по горизонтали */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат:

Пример

Теперь давайте, наоборот, добавим свойство top, не добавляя позицию по горизонтали. В результате по вертикали наш блок станет на указанное значение, а по горизонтали - останется стоять там, где и стоял:

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; /* добавляем позицию по вертикали */
  
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid green;
}
#elem3 {
  width: 50px;
  height: 150px;
  border: 1px solid blue;
}

Результат: