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