Абсолютно позициониране без координати в 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;
}

Результат: