Тхе top
, bottom
, left
и right
особине се користе са могућности да подесите постављање елемента. Они имају ефекат само на позициониране елементе, који су елементи са position
својством подешеним на било шта друго осим static
. На пример: relative
, absolute
, fixed
или sticky
.
div ( : || || auto || inherit; )
Можете га користити, на пример, да гурнете икону на своје место:
button .icon ( position: relative; top: 1px; )
Или поставите посебан елемент унутар контејнера.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )
Вредност за top
, bottom
, left
, а right
може бити било шта од следећег:
- било која од важећих дужина ЦСС-а
- проценат висине елемента који садржи елемент (за
top
иbottom
) или ширине (заleft
иright
) auto
inherit
Елемент ће се генерално удаљити од дате стране када је његова вредност позитивна, а према њој када је вредност негативна. У примеру испод, позитивна дужина за top
помера елемент надоле (даље од врха), а негативна дужина фор top
помера елемент горе (према врху):
Погледајте
Топ Пен : позитивне и негативне вредности Матсуко Фриедланд (@миссматсуко)
на ЦодеПен-у.
Положај
Постављање елемента са вредношћу за top
, bottom
, left
, или right
зависи од њене вредности за position
. Погледајмо шта се дешава када поставимо исту вредност за top
елементе са различитим вредностима за position
.
static
top
Имовина нема никакав утицај на унпоситионед елемената (елемената са position
скупом у static
). Тако се елементи подразумевано позиционирају. Можете користити position: static;
као један метод за поништавање ефекта top
на елемент.
relative
Када top
се постави на елемент са position
подешеном на relative
, елемент ће се кретати горе или доле у односу на првобитно место у документу.
Погледајте Пен
Топ: сродник Матсуко Фриедланд (@миссматсуко)
на ЦодеПен-у.
absolute
Када top
се постави на елемент са position
постављеним на absolute
, елемент ће се кретати горе или доле у односу на најближег позиционираног претка (или документ, ако нема позиционираних предака).
У овој демонстрацији ружичасти оквир са леве стране постављен је 50 пиксела доле од врха странице, јер нема позиционираних елемената предака. Розе кутија са десне стране је постављен 50пк одозго свог родитеља, јер родитељ има position
у relative
.
Погледајте Пен
Топ: абсолуте аутор Матсуко Фриедланд (@миссматсуко)
на ЦодеПен-у.
fixed
Када top
се постави на елемент са position
подешеном на fixed
, елемент ће се кретати горе или доле у односу на приказну површину прегледача.
Погледајте
врх оловке : поправио ЦСС-трикови (@ цсс-трикови)
на ЦодеПен-у.
На први поглед може се чинити да не постоји разлика између absolute
и fixed
. Разлика се може уочити када их упоредите на страници која има довољно садржаја за листање. Док се померате надоле, fixed
елемент положаја је увек на видику, док се absolute
елемент положаја помера.
Погледајте
Померање оловком : фиксирано у односу на апсолутно помоћу ЦСС-трикова (@ цсс-трикови)
на ЦодеПен-у.
sticky
Када top
се постави на елемент са position
подешеном на sticky
, елемент ће се кретати нагоре или надоле у односу на најближег претка помоћу оквира за померање (или оквира за приказ, ако ниједан предак нема поље за померање), ограничено на границе његовог елемента који садржи.
Постављање top
на sticky
постављену елемента не много учинити, осим ако његова посуда је виши него што је, и имате довољно садржај сцролл. Као и код fixed
, елемент ће остати на видику док се крећете. За разлику од тога fixed
, елемент ће нестати из вида чим дође до ивица свог елемента који садржи.
Погледајте
Померање оловком : фиксирано и лепљиво помоћу ЦСС-трикова (@ цсс-трикови)
на ЦодеПен-у.
Имам те
Постављање супротних страна
Можете подесити вредност за сваки top
, bottom
, left
, и right
на једном елементу. Када поставите вредности за супротне стране ( top
и bottom
, или left
и right
), резултат можда неће увек бити онакав какав очекујете.
У већини случајева bottom
се занемарује ако top
је већ постављено и right
занемарује се ако left
је већ постављено. Када је смер постављен на rtl
(десно налево), left
игнорише се уместо right
. Да би за сваку вредност да имају ефекта, елемент мора имати position
сет на absolute
или fixed
и height
скуп у auto
(подразумевано).
У овом примеру, поставили смо top
, bottom
, left
, и right
да `20пк`, и очекујемо сваку страну унутрашње кутије буде 20пк даље од стране спољашњег оквира:
Погледајте поставке оловке
горе, доле, лево и десно од стране ЦСС-трикова (@ цсс-трикови)
на ЦодеПен-у.
Када је фиксно, није у односу на приказ
Елементи са position
подешеном на fixed
нису увек позиционирани у односу на приказ. То ће бити позициониран у односу на свог најближег претка са transform
, perspective
или filter
имовине сет за било шта друго осим none
, ако постоји.
Додавање или уклањање простора
Ако сте позиционирали елемент и установили да је сада празан простор или нема довољно простора тамо где сте очекивали, то може имати везе са тим да ли је елемент у току протока документа или ван њега.
Када се елемент извади из тока документа, то значи да простор који је првобитно заузео на страници нестаје. То је случај када је елемент позициониран absolute
или fixed
. У овом примеру, оквир са садржајем апсолутно позиционираног елемента се срушио јер је апсолутно позиционирани елемент уклоњен из тока документа:
Погледајте
Ток докумената оловке Матсуко Фриедланд (@миссматсуко)
на ЦодеПен-у.
Подршка прегледача
Можете завирити, али не постоји забринутост за више прегледача за top
имовину. Користите по вољи.