Top / bund / venstre / højre - CSS-tricks

Anonim

De top, bottom, leftog rightegenskaber anvendes med position til at indstille placeringen af et element. De har kun en effekt på placerede elementer, som er elementer med positionegenskaben indstillet til andet end static. For eksempel: relative, absolute, fixed, eller sticky.

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

Du kan f.eks. Bruge det til at skubbe et ikon på plads:

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

Eller placer et specielt element inde i en container.

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

Værdien for top, bottom, left, og rightkan være et af følgende:

  • en hvilken som helst af de gyldige længder af CSS
  • en procentdel af det indeholdende elements højde (for topog bottom) eller bredde (for leftog right)
  • auto
  • inherit

Elementet vil generelt bevæge sig væk fra en given side, når dets værdi er positiv, og mod det, når værdien er negativ. I eksemplet nedenfor topbevæger en positiv længde for elementet ned (væk fra toppen) og en negativ længde for topflytter elementet op (mod toppen):

Se Pen
Top: positive og negative værdier af Matsuko Friedland (@missmatsuko)
på CodePen.

Position

Placeringen af et element med en værdi for top, bottom, left, eller rightafhænger af dens værdi for position. Lad os se på, hvad der sker, når vi indstiller den samme værdi for toppå elementer med forskellige værdier for position.

static

Det tophar ingen effekt på unpositioned elementer (elementer med positionsæt til static). Sådan placeres elementer som standard. Du kan bruge position: static;som en metode til at fortryde effekten af topet element.

relative

Når toper indstillet på et element med positionindstillet til relative, bevæger elementet sig op eller ned i forhold til dets oprindelige placering i dokumentet.

Se Pen
Top: slægtninge af Matsuko Friedland (@missmatsuko)
på CodePen.

absolute

Når toper indstillet på et element med positionindstillet til absolute, bevæger elementet sig op eller ned i forhold til dets nærmeste placerede forfader (eller dokumentet, hvis der ikke er nogen placerede forfædre).

I denne demo er den lyserøde boks til venstre placeret 50 px ned fra toppen af ​​siden, fordi den ikke har nogen forfædreelementer. Den lyserøde boks til højre er placeret 50 pixel ned fra toppen af ​​sin forælder, fordi forældrene har et positionaf relative.

Se Pen
Top: absolut af Matsuko Friedland (@missmatsuko)
på CodePen.

fixed

Når toper indstillet på et element med positionindstillet til fixed, bevæger elementet sig op eller ned i forhold til browserens visningsport.

Se Pen
Top: rettet af CSS-Tricks (@ css-tricks)
på CodePen.

Ved første øjekast kan det virke som om der ikke er forskel på absoluteog fixed. Forskellen kan ses, når du sammenligner dem på en side, der har nok indhold til at rulle. Når du ruller ned, er fixedpositionselementet altid synligt, mens absolutepositionselementet ruller væk.

Se
Penrulning: fast vs. absolut ved CSS-Tricks (@ css-tricks)
på CodePen.

sticky

Når toper indstillet på et element med positionindstillet til sticky, bevæger elementet sig op eller ned i forhold til den nærmeste forfader med et rullefelt (eller visningsporten, hvis ingen forfader har et rullefelt), begrænset til grænserne for det indeholdende element.

Indstilling topaf et stickypositioneret element gør ikke meget, medmindre dets container er højere end den er, og du har nok indhold til at rulle. Som med fixed, forbliver elementet synligt, mens du ruller. I modsætning fixedtil vil elementet falde ud af syne, når det når kanterne af det indeholdende element.

Se
Penrulning: fast vs. klæbrig af CSS-Tricks (@ css-tricks)
på CodePen.

Gotchas

Sætter modsatte sider

Du kan angive en værdi for hver af top, bottom, leftog rightpå et enkelt element. Når du indstiller værdier til modsatte sider ( topog bottom, eller leftog right), er resultatet muligvis ikke altid det, du forventer.

I de fleste tilfælde bottomignoreres, hvis den topallerede er indstillet, og rightignoreres, hvis den leftallerede er indstillet. Når retningen er indstillet til rtl(højre mod venstre), leftignoreres i stedet for right. For at hver værdi skal have en effekt, skal elementet have et positionsæt til absoluteeller fixedog heightindstillet til auto(standard).

I dette eksempel har vi sat top, bottom, leftog righttil `20px`, og forventer hver side af den indre kasse at være 20px væk fra siderne af den ydre kasse:

Se penindstillingen
øverst, nederst, venstre og højre ved CSS-Tricks (@ css-tricks)
på CodePen.

Når det er rettet, er det ikke relativt til visningen

Elementer med positionindstillet til fixeder ikke altid placeret i forhold til visningen. Den vil blive placeret i forhold til sin nærmeste forfader med en transform, perspectiveeller filterejendom sæt til andet end none, hvis den findes.

Tilføjelse eller fjernelse af plads

Hvis du har placeret et element og fundet ud af, at der nu er et tomt rum eller ikke nok plads, hvor du forventede, har det muligvis at gøre med, om elementet er i eller uden for dokumentets flow.

Når et element tages ud af dokumentets flow, betyder det, at det rum, det oprindeligt tog op på siden, forsvinder. Dette er tilfældet, når et element er placeret absoluteeller fixed. I dette eksempel er den indeholdende boks for det absolut placerede element kollapset, fordi det absolut placerede element blev fjernet fra dokumentets strøm:

Se
pendokumentflowet af Matsuko Friedland (@missmatsuko)
på CodePen.

Browsersupport

Du kan tage et kig, men der er ingen bekymringer på tværs af browseren for topejendommen. Brug efter ønske.