Абсолютно позициониране

Най-важното за абсолютното позициониране

Абсолютно позиционираният елемент се изважда от нормалния поток на страницата и вече не пази мястото си. Той се позиционира спрямо най-близкия родител, който има зададено позициониране. Ако няма такъв, се позиционира спрямо цялата страница. Това е ключовата разлика, която трябва да запомните.

При left: 0; и top: 0; елементът отива в горния ляв ъгъл на своя „позициониран“ родител – или на страницата, ако няма такъв.

Стъпка по стъпка: как да го тествате

1. Изберете елемент (например изображение на телефон) и му задайте абсолютно позициониране.
2. Добавете отместване с left: 80px; и top: 80px; и наблюдавайте как елементът се премества и мястото му изчезва.
3. Променете стойностите на left: 0; и top: 0; – ще видите, че отива в горния ляв ъгъл на страницата.
4. Добавете position: relative; на родителски елемент (например aside).
5. Отново задайте left: 0; и top: 0; на абсолютно позиционирания елемент – той вече ще се подравни спрямо aside, а не спрямо страницата.
6. Ако добавите position: relative; на по-близък родител (например ul), позиционирането ще се изчислява спрямо него.

Използвани CSS свойства

• position: absolute; – изважда елемента от нормалния поток и го позиционира спрямо най-близкия позициониран родител.
• position: relative; – запазва мястото на елемента, но му позволява да бъде референтна точка за абсолютно позиционирани деца.
• top – отстояние от горния край на референтния елемент.
• left – отстояние от левия край на референтния елемент.