Topp / bunn / venstre / høyre - CSS-triks

Anonim

De top, bottom, leftog rightegenskapene brukes sammen med posisjon for å angi plasseringen av et element. De har bare en effekt på posisjonerte elementer, som er elementer med positioneiendommen satt til noe annet enn static. For eksempel: relative, absolute, fixed, eller sticky.

div ( : || || auto || inherit; )

Du kan for eksempel bruke det til å skyve et ikon på plass:

button .icon ( position: relative; top: 1px; )

Eller plasser et spesielt element i en container.

.container ( position: relative; ) .container header ( position: absolute; top: 0; )

Verdien for top, bottom, leftog rightkan være noe av det følgende:

  • noen av gyldige lengder på CSS
  • en prosentandel av det som inneholder elementets høyde (for topog bottom) eller bredde (for leftog right)
  • auto
  • inherit

Elementet vil vanligvis bevege seg bort fra en gitt side når verdien er positiv, og mot den når verdien er negativ. I eksemplet nedenfor vil en positiv lengde for topflytte elementet ned (bort fra toppen) og en negativ lengde for topvil flytte elementet opp (mot toppen):

Se pennens
topp: positive og negative verdier av Matsuko Friedland (@missmatsuko)
på CodePen.

Stilling

Plassering av et element med en verdi for top, bottom, left, eller rightavhenger av dens verdi for position. La oss se på hva som skjer når vi setter den samme verdien for toppå elementer med forskjellige verdier for position.

static

Den topegenskapen har ingen effekt på unpositioned elementer (elementer med positionsatt til static). Slik er elementene plassert som standard. Du kan bruke position: static;som en metode for å angre effekten av topet element.

relative

Når toper satt på et element med positionsatt til relative, vil elementet bevege seg opp eller ned i forhold til sin opprinnelige plassering i dokumentet.

Se pennens
topp: slektning av Matsuko Friedland (@missmatsuko)
på CodePen.

absolute

Når toper satt på et element med positionsatt til absolute, vil elementet bevege seg opp eller ned i forhold til sin nærmeste posisjonerte forfader (eller dokumentet, hvis det ikke er noen forfedre som er plassert).

I denne demoen er den rosa boksen til venstre plassert 50 px fra toppen av siden, fordi den ikke har noen forfedreelementer. Den rosa boksen til høyre er plassert 50 px fra toppen av foreldrene, fordi foreldrene har en positionav relative.

Se pennens
topp: absolutt av Matsuko Friedland (@missmatsuko)
på CodePen.

fixed

Når toper satt på et element med positionsatt til fixed, vil elementet bevege seg opp eller ned i forhold til nettleserens visningsport.

Se pennetoppen
: løst av CSS-Tricks (@ css-tricks)
på CodePen.

Ved første øyekast kan det virke som om det ikke er forskjell på absoluteog fixed. Forskjellen kan sees når du sammenligner dem på en side som har nok innhold til å bla. Når du ruller ned, er fixedposisjonselementet alltid i sikte, mens absoluteposisjonselementet ruller bort.

Se
penneskrolling: fast vs. absolutt av CSS-Tricks (@ css-tricks)
på CodePen.

sticky

Når toper satt på et element med positionsatt til sticky, vil elementet bevege seg opp eller ned i forhold til nærmeste forfader med en rulleboks (eller visningsfeltet, hvis ingen forfedre har en rulleboks), begrenset til grensene for det inneholder elementet.

Innstilling topav et stickyposisjonert element gjør ikke mye med mindre beholderen er høyere enn den er, og du har nok innhold til å bla. Som med fixed, vil elementet forbli synlig når du blar. I motsetning fixedtil vil elementet falle utenfor synet når det når kantene på det inneholder elementet.

Se
penneskrolling: fast vs. klebrig av CSS-Tricks (@ css-tricks)
på CodePen.

Gotchas

Setter motsatte sider

Du kan angi en verdi for hver av top, bottom, left, og rightpå et enkelt element. Når du setter verdier for motsatte sider ( topog bottom, eller leftog right), kan det hende at resultatet ikke alltid blir det du forventer.

I de fleste tilfeller bottomignoreres hvis topallerede er satt, og rightignoreres hvis leftallerede er angitt. Når retning er satt til rtl(høyre mot venstre), leftblir ignorert i stedet for right. For at hver verdi skal ha en effekt, må elementet ha et positionsett til absoluteeller fixedog heightsatt til auto(standard).

I dette eksemplet har vi satt top, bottom, left, og rightfor å `20px`, og forvente hver side av den indre boksen for å være 20 piksler bort fra sidene av det ytre kasse:

Se penninnstillingen
øverst, nederst, venstre og høyre av CSS-Tricks (@ css-tricks)
på CodePen.

Når løst er ikke relativt til visningsområdet

Elementer som er positionsatt til fixeder ikke alltid plassert i forhold til visningsområdet. Det vil bli plassert i forhold til sin nærmeste stamfar med en transform, perspectiveeller filtereiendommen er satt til noe annet enn none, hvis det finnes.

Legge til eller fjerne plass

Hvis du har plassert et element og funnet ut at det nå er et tomt rom eller ikke nok plass der du forventet, kan det ha å gjøre med om elementet er i eller utenfor dokumentets flyt.

Når et element tas ut av dokumentets flyt, betyr det at plassen det opprinnelig tok opp på siden forsvinner. Dette er tilfelle når et element er plassert absoluteeller fixed. I dette eksemplet har den inneholdende boksen til det absolutt plasserte elementet kollapset fordi det absolutt plasserte elementet ble fjernet fra dokumentets flyt:

Se
pennedokumentflyten av Matsuko Friedland (@missmatsuko)
på CodePen.

Nettleserstøtte

Du kan ta en titt, men det er ingen bekymringer for nettleseren for topeiendommen. Bruk etter ønske.