Положај - ЦСС-трикови | ЦСС Алманац 2025

positionИмовина може помоћи да манипулише положај елемента, на пример:

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

У односу на првобитни положај, горњи елемент ће сада бити гурнут одозго за 20 пиксела. Ако бисмо анимирали ова својства, можемо видети колико нам ово даје контролу (иако ово није добра идеја из разлога перформанси):

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

Вредности

static: сваки елемент подразумевано има статички положај, тако да ће се елемент држати нормалног тока странице. Дакле, ако постоји сет леви / десни / горњи / доњи / з-индекс, тада неће бити ефекта на тај елемент.
relative: првобитна позиција елемента остаје у току документа, баш као и staticвредност. Али сада ће радити леви / десни / горњи / доњи / з-индекс. Позициона својства „померају“ елемент са првобитног положаја у том правцу.
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као она може помоћи да поставите елемент било где у односу на документу, међутим, ова вредност не утиче померањем. Погледајте подређени елемент у демонстрацији испод и како се, када се померите, наставља лепити на дну странице:

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром	Фирефок	ИЕ	Ивица	Сафари
4	2	7	12	3.1

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

Андроид Цхроме	Андроид Фирефок	Андроид	иОС Сафари
88	85	3	8

Лепљиво

stickyВредност је као компромис између relativeи fixedвредности. Од овог писања, ово је тренутно експериментална вредност, што значи да није део званичне спецификације и само су је делимично усвојили изабрани прегледачи. Другим речима, вероватно није најбоља идеја да се ово користи на веб локацији за продукцију уживо.

Шта ради? Па, омогућава вам позиционирање елемента у односу на било шта у документу, а затим, када се корисник помакне поред одређене тачке у оквиру за приказ, поправите положај елемента на тој локацији тако да остане упорно приказан као елемент са fixedвредност.

Узмимо следећи пример:

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

Елемент ће бити релативно позициониран све док место помицања видног поља не досегне тачку на којој ће елемент бити 50pxод врха видног поља. У том тренутку елемент постаје лепљив и остаје на fixedположају на 50pxврху екрана.

Следећа демонстрација илуструје ту тачку, где је горња навигација подразумевано relativeпозиционирање, а друга навигација је постављена на stickyсам врх оквира за приказ. Имајте на уму да ће демонстрација радити само у Цхроме-у, Сафари-у и Опера-и у време писања овог текста.