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