Горе / доле / лево / десно - ЦСС-трикови

Anonim

Тхе 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имовину. Користите по вољи.