Позиция - CSS-трикове | CSS алманах 2025

В positionимота може да ви помогне да манипулира местоположението на даден елемент, като например:

.element ( position: relative; top: 20px; )

Спрямо първоначалната си позиция горният елемент сега ще бъде изместен отгоре с 20px. Ако трябваше да анимираме тези свойства, можем да видим колко много контрол ни дава това (въпреки че това не е добра идея поради съображения за производителност):

relativeе само една от шестте стойности за positionсвойството. Ето и останалите:

Стойности

static: всеки елемент има статично положение по подразбиране, така че елементът ще се придържа към нормалния поток на страницата. Така че, ако има набор ляв / десен / отгоре / отдолу / z-индекс, тогава няма да има ефект върху този елемент.
relative: първоначалната позиция на елемент остава в потока на документа, точно както staticстойността. Но сега ляв / десен / отгоре / отдолу / z-индекс ще работи. Позиционните свойства „изтласкват“ елемента от първоначалната позиция в тази посока.
absolute: елементът е премахнат от потока на документа и други елементи ще се държат така, сякаш дори не е там, докато всички останали позиционни свойства ще работят върху него.
fixed: елементът се отстранява от потока на документа като абсолютно позиционирани елементи. Всъщност те се държат почти еднакво, само фиксираните позиционирани елементи винаги са относителни към документа, а не към конкретен родител и не се влияят от превъртането.
sticky(експериментално): елементът се третира като relativeстойност, докато местоположението на превъртането на прозореца за показване достигне определен праг, в който момент елементът заема fixedпозиция, където му е казано да се придържа.
inherit: positionстойността не се каскадира, така че това може да се използва, за да я принуди по-специално и inheritстойността за позициониране от нейния родител.

Абсолютно

Ако дъщерният елемент има absoluteстойност, тогава родителският елемент ще се държи така, сякаш детето изобщо не е там:

.element ( position: absolute; )

И когато се опитаме да зададем други стойности като left, bottomи rightще открием, че дъщерният елемент реагира не на измеренията на своя родител, а на документа:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

За да направим дочерния елемент позициониран абсолютно от неговия родителски елемент, трябва да зададем това на самия родителски елемент:

.parent ( position: relative; )

Сега свойства, като например left, right, bottomи topще се отнася към майка елемент, така че ако се направи дете елемент прозрачен можем да видим, че седи прав в долната част на родителя:

Фиксирана

На fixedстойност е подобна absolute, тъй като може да ви помогне да позиционирате елемент навсякъде по отношение на документа, обаче тази стойност не се повлиява от превъртане. Вижте дъщерния елемент в демонстрацията по-долу и как, след като превъртите, той продължава да се придържа към дъното на страницата:

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

работен плот

Chrome	Firefox	IE	Ръб, край	Сафари
4	2	7	12	3.1

Мобилен / таблет

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Лепкава

На stickyстойност е като компромис между relativeи fixedценности. Към момента на написването в момента това е експериментална стойност, което означава, че не е част от официалната спецификация и е възприето само частично от избрани браузъри. С други думи, може би не е най-добрата идея да използвате това на уебсайт за живо производство.

Какво прави? Е, той ви позволява да позиционирате елемент спрямо каквото и да е в документа и след това, след като потребителят превърти определена точка в прозореца, фиксирайте позицията на елемента към това място, така че той да се показва постоянно като елемент с fixedстойност.

Вземете следния пример:

.element ( position: sticky; top: 50px; )

Елементът ще бъде разположен относително, докато местоположението на превъртане на прозореца за показване достигне точка, където елементът ще бъде 50pxот горната част на прозореца за гледане. В този момент, на елемента става лепкава и остава на fixedпозицията 50pxгорната част на екрана.

Следващата демонстрация илюстрира тази точка, където горната навигация е relativeпозициониране по подразбиране, а втората навигация е настроена stickyна самия връх на прозореца за гледане. Моля, имайте предвид, че демонстрацията ще работи само в Chrome, Safari и Opera по време на писането.