Апсолутно позиционирање без координата у CSS-у
Заправо, навођење координата при апсолутном
позиционирању није обавезно. Ако се елементу
једноставно напише 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;
}
:
