Ülemine / alumine / vasak / parem - CSS-trikid

Anonim

top, bottom, leftJa rightomadused on kasutatud positsiooni seadmiseks paigutamine element. Neil on mõju ainult positsioneeritud elementidele, mis on elemendid, mille positionomadus on määratud millekski muuks kui static. Näiteks: relative, absolute, fixedvõi sticky.

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

Võite seda kasutada näiteks ikooni paigale nihutamiseks:

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

Või asetage konteinerisse spetsiaalne element.

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

Väärtus top, bottom, left, ja rightvõib olla mis tahes järgmine omadus:

  • mis tahes CSS-i kehtiv pikkus
  • protsent sisaldava elemendi kõrgusest (for topja bottom) või laiusest (for leftja right)
  • auto
  • inherit

Element eemaldub antud küljest tavaliselt siis, kui selle väärtus on positiivne, ja selle poole, kui väärtus on negatiivne. Allpool toodud näites topliigutab elemendi positiivne pikkus allapoole (ülevalt eemale) ja negatiivne pikkus topelemendi ülespoole (ülaserva):

Vaadake
Mensuko Friedlandi (@missmatsuko) positiivseid ja negatiivseid väärtusi
CodePenis.

Positsioon

Paigutamine element koos raha top, bottom, leftvõi rightsõltub selle raha position. Vaatame, mis juhtub, kui määrame sama väärtuse topelementidele, mille väärtus on erinev position.

static

topVara ei ole mingit mõju unpositioned elemendid (elementide positionseatud static). Nii paigutatakse elemendid vaikimisi. Elemendi position: static;mõju tagasivõtmiseks võite kasutada ühte meetodit top.

relative

Kui see topon määratud elemendile, mille väärtuseks on positionseatud relative, liigub element dokumendis algse paigutuse suhtes üles või alla.

Vaadake pliiatsi
ülaosas: sugulane Matsuko Friedland (@missmatsuko)
saidil CodePen.

absolute

Kui see topon määratud elemendile, mille väärtuseks on positionseatud väärtus absolute, liigub element üles või alla lähima positsioneeritud esivanema (või dokumendi, kui positsioneeritud esivanemaid pole).

Selles demos paikneb vasakpoolne roosa kast lehe ülaosast 50 pikslit allapoole, kuna sellel pole esivanemate elemente. Roosa kasti paremal paikneb 50px ülevalt oma vanem, sest vanemal on positionkohta relative.

Vaadake pliiatsi
ülaosa: absoluutne Matsuko Friedland (@missmatsuko)
saidil CodePen.

fixed

Kui see topon määratud elemendile, mille väärtus on positionseatud fixed, liigub element brauseri vaateava suhtes üles või alla.

Vaadake pliiatsi
ülaosa: CSS-Tricks (@ css-tricks)
fikseeritud CodePenis.

Esmapilgul võib tunduda, et absoluteja vahel pole vahet fixed. Erinevust saab näha, kui võrrelda neid lehel, millel on kerimiseks piisavalt sisu. Alla kerimise ajal on fixedpositsiooni element alati nähtaval, samal ajal kui absolutepositsiooni element kerib eemale.

Vaadake CodeSeni pliiatsi
kerimine: fikseeritud vs absoluutne CSS-Tricks (@ css-tricks)
abil.

sticky

Kui see topon seatud elemendile, mille väärtuseks on positionseatud sticky, liigub element lähima esivanema suhtes kerimisribaga (või vaateakuga, kui ühelgi esivanemal pole kerimiskasti), piirdudes seda sisaldava elemendi piiridega.

Setting topkohta stickypaigutatud element ei tee palju, kui pakend on pikem kui see on, ja teil on piisavalt sisu, et kerida. Nagu ka fixed, jääb element kerimise ajal silma. Erinevalt sellest fixed, kui element jõuab seda sisaldava elemendi servadesse, langeb see vaateväljast välja.

Vaadake CodeSenil
CSS-
Tricksi (@ css-tricks) abil pliiatsi kerimist : fikseeritud vs kleepuv .

Gotchad

Vastaskülgede seadmine

Saate määrata väärtus iga top, bottom, left, ja rightühe elemendi. Kui määrate vastaskülgedele ( topja bottom, või leftja ja right) väärtused, ei pruugi tulemus alati olla see, mida ootate.

Enamasti bottomignoreeritakse seda, kui see topon juba seatud, ja rightignoreeritakse, kui see lefton juba seatud. Kui suund on seatud rtl(paremalt vasakule), leftignoreeritakse selle asemel right. Et iga väärtust mõjutada, element peab olema positionseatud absolutevõi fixedja heightseatud auto(vaikimisi).

Selles näites me seame top, bottom, left, ja rightet `20px` ja oodata mõlemal pool sisemise kasti olema 20px eemal pool karbil:

Vaadake CodeSeni
CSS-
Tricksi (@ css-tricks) poolt ülevalt, alt, vasakult ja paremalt olevaid pliiatsi seadeid.

Parandatud ei ole vaateava suhtes

Elemendid, mille positionväärtuseks fixedon määratud, ei asu alati vaateava suhtes. Tuleb asendis oma lähima esivanem koos transform, perspectivevõi filtervara seatud midagi muud kui none, kui see on olemas.

Ruumi lisamine või eemaldamine

Kui olete elemendi paigutanud ja leidnud, et seal on nüüd tühi koht või pole piisavalt ruumi, nagu arvasite, võib see olla seotud sellega, kas element on dokumendi voos või väljaspool seda.

Kui element võetakse dokumendi voost välja, tähendab see, et kaob tühjendus, mille ta lehel algselt võttis. Seda juhul, kui element on paigutatud absolutevõi fixed. Selles näites on absoluutselt paigutatud elemendi karp kokku kukkunud, kuna absoluutselt asetatud element eemaldati dokumendi voost:

Vaadake
Matsuko Friedlandi (@ missmatsuko) pliiatsi dokumendivoogu
CodePenis.

Brauseri tugi

Võite piiluda, kuid brauseriüleseid muresid selle topvara suhtes pole. Kasutage oma äranägemise järgi.