Насправді вказівки координат за абсолютного
позиціонування необов'язкові. Якщо елементу
просто написати position в значенні
absolute, то він стане абсолютно спозиціонованим,
але залишиться стояти в тому самому місці, де і
стояв. При цьому всі інші елементи будуть
поводитися так, ніби нашого елемента немає
і можуть налізти на нього.
Давайте подивимося на прикладах.
Приклад
Для початку давайте просто зробимо три блоки без позиціонування та між ними певний текст:
<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;
}
:
Приклад
А тепер давайте додамо зеленому блоку absolute.
В результаті цей блок залишиться на місці,
а всі елементи знизу поводитимуться так,
ніби нашого елемента немає і налізуть на нього:
<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;
}
:
Приклад
А тепер давайте додамо властивість left,
не додаючи позицію щодо вертикалі. В результаті
по горизонталі наш блок стане на вказане
значення, а по вертикалі – залишиться стояти
там, де й стояв:
<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; /* додаємо позицію по горизонталі */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Приклад
Тепер давайте, навпаки, додамо властивість
top, не додаючи позиції по горизонталі.
В результаті по вертикалі наш блок стане
на вказане значення, а по горизонталі -
залишиться стояти там, де й стояв:
<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; /* додаємо позицію щодо вертикалі */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
: