Ylhäältä / alhaalta / vasemmalta / oikealta - CSS-temppuja

top, bottom, left, Ja rightominaisuuksia käytetään sijainnin asettaa sijoittaminen elementin. Ne vaikuttavat vain sijoitettuihin elementteihin, jotka ovat elementtejä, joiden positionominaisuus on asetettu muulle kuin static. Esimerkiksi: relative, absolute, fixed, tai sticky.

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

Voit käyttää sitä esimerkiksi työntämään kuvaketta paikalleen:

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

Tai sijoita erityinen elementti astiaan.

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

Arvoa top, bottom, left, ja rightvoi olla jokin seuraavista:

• mikä tahansa kelvollinen CSS-pituus
• prosenttiosuus sisältävän elementin korkeudesta (for topja bottom) tai leveydestä (for leftand right)
• auto
• inherit

Elementti siirtyy yleensä tietyltä puolelta, kun sen arvo on positiivinen, ja kohti sitä, kun arvo on negatiivinen. Alla olevassa esimerkissä positiivinen pituus topelementille siirtää elementin alaspäin (poispäin ylhäältä) ja negatiivinen pituus topelementille siirtää elementin ylöspäin (ylöspäin):

Katso kynän
alkuun: positiiviset ja negatiiviset arvot Matsuko Friedland (@missmatsuko)
CodePenistä.

Sijainti

Sijoittaminen elementti, jossa arvo top, bottom, left, tai rightriippuu sen arvoa position. Katsotaanpa, mitä tapahtuu, kun asetamme saman arvon topelementeille, joiden arvo on erilainen position.

static

topKiinteistö ei ole vaikutusta unpositioned elementtejä (elementtien positionasetettu static). Näin elementit sijoitetaan oletusarvoisesti. Voit käyttää position: static;yhtenä menetelmänä kumoamaan topelementin vaikutuksen.

relative

Kun se topon asetettu elementille, jonka positionarvo on asetettu relative, elementti liikkuu ylös tai alas suhteessa alkuperäiseen sijoitteluunsa asiakirjassa.

Katso kynän
alkuun: sukulainen, kirjoittanut Matsuko Friedland (@missmatsuko)
CodePenissä.

absolute

Kun se topon asetettu elementille, positionjonka arvoksi on asetettu absolute, elementti liikkuu ylös tai alas suhteessa lähimpään sijoitettuun esi-isäänsä (tai asiakirjaan, jos ei ole sijoitettuja esi-isiä).

Tässä esittelyssä vasemmalla oleva vaaleanpunainen laatikko on sijoitettu 50 kuvapistettä alaspäin sivun yläosasta, koska siinä ei ole sijoitettuja esi-elementtejä. Vaaleanpunainen laatikko oikealla on sijoitettu 50 kuvapistettä ylhäältä alas sen vanhemman, koska vanhempi on positionannettu relative.

Katso kynän
alkuun: absoluuttinen Matsuko Friedland (@missmatsuko)
CodePenistä.

fixed

Kun se topon asetettu elementille, jonka positionarvo on asetettu fixed, elementti liikkuu ylös tai alas suhteessa selaimen näkymäikkunaan.

Katso kynän
alkuun: CSS-Tricks (@ css-tricks)
on korjannut CodePenissä.

Ensi silmäyksellä, se voi tuntua ei ole eroa absoluteja fixed. Ero näkyy, kun verrataan niitä sivulla, jolla on tarpeeksi sisältöä vieritettäväksi. Kun vierität alas, fixedsijaintielementti on aina näkyvissä, kun taas absolutesijaintielementti vierittää poispäin.

Katso Kynän
vieritys: kiinteä vs. absoluuttinen CSS-
Tricksilla (@ css-tricks) CodePenillä.

sticky

Kun se topon asetettu elementille, jonka positionarvo on asetettu sticky, elementti liikkuu ylös tai alas suhteessa lähimpään esi-isään vieritysruudulla (tai näkymässä, jos kenelläkään esi-isällä ei ole vierityskenttää), rajoitettuna sen sisältävän elementin rajoihin.

Asettaminen topon stickyasetettu elementti ei tee paljon, ellei sen pakkaus on pitempi kuin se on, ja sinulla on tarpeeksi sisältöä selaamalla. Kuten fixed, elementti pysyy näkyvissä vierittäessäsi. Toisin kuin fixedelementti putoaa näkyvistä, kun se saavuttaa sen sisältävän elementin reunat.

Katso
CSS-Tricks (@ css-tricks) -kynän vieritys: kiinteä vs. tahmea
CodePenissä.

Gotchas

Vastakkaisten sivujen asettaminen

Voit asettaa arvo kullekin top, bottom, left, ja rightyhdellä elementti. Kun asetat arvoja vastakkaisille sivuille ( topja bottom, tai leftja ja right), tulos ei välttämättä aina vastaa odotuksiasi.

Useimmissa tapauksissa bottomohitetaan, jos se topon jo asetettu, ja rightohitetaan, jos se lefton jo asetettu. Kun suunta on asetettu rtl(oikealta vasemmalle), leftse ohitetaan right. Jotta jokaisella arvolla olisi vaikutus, elementillä on oltava positionasetettu arvo absolutetai fixedja heightasetettu arvoon auto(oletus).

Tässä esimerkissä, asetamme top, bottom, left, ja rightettä `20px`, ja odottaa kummallakin puolella sisemmän laatikon olevan 20 kuvapistettä pois puolin ulomman laatikon:

Katso CodeSenin
CSS-Tricks (@ css-tricks) -kynän ylä-, ala-, vasen- ja oikeanpuoleinen kynän asetus
.

Kun korjaus ei ole suhteessa näkymäikkunaan

Elementit, joiden positionasetukseksi on määritetty, fixedeivät aina sijaitse suhteessa näkymäikkunaan. Se sijoitetaan suhteessa sen lähin kantaisä kanssa transform, perspectivetai filteromaisuuden asetettu mitään muuta kuin none, jos sellainen on olemassa.

Tilan lisääminen tai poistaminen

Jos olet sijoittanut elementin ja huomannut, että siellä on nyt tyhjä tila tai ei ole tarpeeksi tilaa odotetulla tavalla, se saattaa liittyä siihen, onko elementti asiakirjan kulussa vai ei.

Kun elementti poistetaan asiakirjan kulusta, se tarkoittaa, että tila, jonka se alun perin käytti sivulla, katoaa. Näin on silloin, kun elementti on sijoitettu absolutetai fixed. Tässä esimerkissä ehdottomasti sijoitetun elementin sisältävä laatikko on romahtanut, koska ehdottomasti sijoitettu elementti poistettiin asiakirjan kulusta:

Katso
Matsuko Friedlandin (@missmatsuko)
kynäasiakirjoja CodePenistä.

Selaimen tuki

Voit kurkistaa, mutta ominaisuudella ei ole selainten välisiä huolenaiheita top. Käytä haluamallasi tavalla.