Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.
Фиксирано позициониране
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Фиксирано позициониране – елементът остава на място при скрол
Fixed позиционирането изважда елемента от нормалния поток на страницата и го фиксира спрямо прозореца на браузъра, а не спрямо друг родителски елемент. Това означава, че дори при скролиране на съдържанието, фиксираният елемент остава на едно и също място. Това е основната разлика спрямо absolute позиционирането, при което елементът се движи заедно със страницата.
Стъпка по стъпка: демонстрация на разликата
- Задайте на избран елемент (например „телефон“)
position: fixed. - Наблюдавайте как той се позиционира в горния ляв ъгъл на прозореца.
- Добавете голям
padding(например 800px отгоре) на друг елемент катоaside, за да се появи скрол. - Скролирайте страницата – фиксираният елемент остава неподвижен.
- Сменете
position: fixedсposition: absoluteи премахнетеrelativeот родителите. - При скрол ще видите, че елементът вече се движи заедно със съдържанието.
Използвани CSS свойства
position: fixed– фиксира елемента спрямо прозореца на браузъра; игнорира останалите елементи в йерархията.position: absolute– позиционира елемента спрямо най-близкия позициониран родител или спрямо страницата.position: relative– създава контекст за абсолютни елементи без да ги изважда от потока.padding– добавя вътрешно отстояние и може да предизвика поява на скрол при големи стойности.
