Asema - CSS-temppuja | CSS-almanakka 2025

positionOminaisuus voi auttaa manipuloida sijainti elementin, esimerkiksi:

.element ( position: relative; top: 20px; )

Alkuperäiseen sijaintiinsa nähden yllä oleva elementti työntyy nyt ylhäältä alas 20 kuvapistettä. Jos animoisimme nämä ominaisuudet, voimme nähdä, kuinka paljon hallintaa tämä antaa meille (vaikka tämä ei ole hyvä idea suorituskyvyn vuoksi):

relativeon vain yksi ominaisuuden kuudesta arvosta position. Tässä ovat muut:

Arvot

static: jokaisella elementillä on oletusarvoisesti staattinen sijainti, joten elementti pysyy normaalissa sivuvirrassa. Joten jos vasen / oikea / ylä / ala / z-indeksi on asetettu, tälle elementille ei ole vaikutusta.
relative: elementin alkuperäinen sijainti pysyy asiakirjan kulussa aivan kuten staticarvo. Mutta nyt vasen / oikea / ylä / ala / z-indeksi toimii. Paikoitusominaisuudet "työntävät" elementtiä alkuperäisestä sijainnista siihen suuntaan.
absolute: elementti poistetaan asiakirjan kulusta ja muut elementit käyttäytyvät ikään kuin sitä ei olisi edes siellä, kun taas kaikki muut sijaintiominaisuudet toimivat sillä.
fixed: elementti poistetaan asiakirjan kulusta aivan ehdottomasti sijoitettujen elementtien tapaan. Itse asiassa ne käyttäytyvät melkein samalla tavalla, vain kiinteät sijoitetut elementit ovat aina suhteessa asiakirjaan, ei mitään tiettyä vanhempaa, ja vieritys ei vaikuta niihin.
sticky(kokeellinen): elementtiä käsitellään relativearvona, kunnes näkymän vierityspaikka saavuttaa määritetyn kynnyksen, jolloin elementti ottaa fixedpaikan, jossa sen käsketään kiinni.
inherit: positionarvo ei pääse kaskadiin, joten sitä voidaan käyttää pakottamaan se nimenomaan ja inheritsen sijainti-arvo sen vanhemmalta.

Ehdottomasti

Jos lapsielementillä on absolutearvo, ylätason elementti käyttäytyy ikään kuin lasta ei olisi ollenkaan:

.element ( position: absolute; )

Ja kun yritämme asettaa muita arvoja, kuten left, bottomja righthuomaamme, että lapsielementti ei vastaa vanhemmansa, vaan asiakirjan mittoihin:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Jotta lapsielementti sijoitettaisiin ehdottomasti vanhemmasta elementistä, meidän on asetettava tämä itse pääelementille:

.parent ( position: relative; )

Nyt ominaisuudet kuten left, right, bottomja topviittaavat emoelementin, joten jos teemme alielementtiin läpinäkyvä voimme nähdä sen istuu alareunassa vanhemman:

Kiinteä

fixedArvo on samanlainen absolutekuin se voi auttaa sinua sijoittaa elementin missään suhteessa asiakirjan, mutta tämä arvo ei vaikuta rullata. Katso alielementti alla olevasta esittelystä ja kuinka se vierittämisen jälkeen pysyy edelleen sivun alaosassa:

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi	Firefox	IE	Reuna	Safari
4	2	7	12	3.1

Matkapuhelin / tabletti

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Tahmea

stickyArvo on kuin kompromissi relativeja fixedarvoja. Tämän kirjoituksen jälkeen se on tällä hetkellä kokeellinen arvo, mikä tarkoittaa, että se ei ole osa virallista spesifikaatiota ja vain osittain valittujen selainten hyväksymä. Toisin sanoen, ei todennäköisesti ole paras idea käyttää tätä live-tuotantosivustolla.

Mitä se tekee? No, sen avulla voit sijoittaa elementin suhteessa mihin tahansa asiakirjassa ja sitten, kun käyttäjä on vierittänyt tietyn pisteen ohitse näkymäikkunassa, korjaa elementin sijainti tähän paikkaan, jotta se pysyy jatkuvasti näytettynä kuin elementti, jossa on fixedarvo.

Ota seuraava esimerkki:

.element ( position: sticky; top: 50px; )

Elementti on suhteellisen sijoitettu, kunnes näkymäikkunan vierityspaikka saavuttaa pisteen, jossa elementti tulee 50pxnäkymän yläosasta. Tässä vaiheessa, elementti tulee tahmeaksi ja pysyy liikkumattomana fixedasennossa 50pxnäytön yläreunassa.

Seuraava esittely kuvaa sitä kohtaa, jossa ylinavigointi on oletussijainti relativeja toinen navigointi on asetettu stickynäkymän yläosaan. Huomaa, että esittely toimii vain Chromessa, Safarissa ja Operassa tämän kirjoituksen aikana.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.