Padėtis - CSS-gudrybės | CSS almanachas 2025

positionTurtas gali padėti jums manipuliuoti elemento vietą, pavyzdžiui:

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

Palyginti su pradine padėtimi, aukščiau pateiktas elementas nuo viršaus dabar bus nuleistas 20 taškų. Jei norėtume animuoti šias savybes, galime pamatyti, kiek tai mums suteikia kontrolės (nors tai nėra gera idėja dėl našumo priežasčių):

relativeyra tik viena iš šešių positionturto verčių . Čia yra kiti:

Vertybės

static: pagal numatytuosius nustatymus kiekvienas elementas turi statinę padėtį, todėl elementas laikysis įprasto puslapio srauto. Taigi, jei yra kairysis / dešinysis / viršutinis / apatinis / z indeksas, tai tam elementui įtakos neturės.
relative: elemento pradinė padėtis išlieka dokumento sraute, kaip ir staticvertė. Bet dabar kairysis / dešinysis / viršuje / apačioje / z indeksas veiks. Padėties savybės ta kryptimi „stumia“ elementą iš pradinės padėties.
absolute: elementas pašalinamas iš dokumento srauto, o kiti elementai elgsis taip, lyg jo net nebūtų, o visos kitos pozicinės savybės veiks.
fixed: elementas pašalinamas iš dokumento srauto kaip absoliučiai išdėstyti elementai. Tiesą sakant, jie elgiasi beveik vienodai, tik fiksuoti elementai yra dokumento atžvilgiu, o ne konkretūs tėvai, ir slinkimas jų neveikia.
sticky(eksperimentinis): elementas traktuojamas kaip relativereikšmė, kol peržiūros srities slinkties vieta pasiekia nurodytą ribą, tada elementas užima fixedpoziciją, kurioje liepiama laikytis.
inherit: positionvertė nėra kaskadinė, todėl ją galima naudoti norint ją priversti ir inheritjos pirminės pozicijos vertę.

Absoliutus

Jei vaiko elementas turi absolutevertę, pagrindinis elementas elgsis taip, lyg vaiko iš viso nebūtų:

.element ( position: absolute; )

Kai bandysime nustatyti kitas vertes, tokias kaip left, bottomir rightpamatysime, kad vaikas elementas reaguoja ne į savo tėvų, o į dokumentą:

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

Norėdami, kad antrinis elementas būtų visiškai lygus pagrindiniam elementui, turime tai nustatyti pačiame pagrindiniame elemente:

.parent ( position: relative; )

Dabar savybės, kaip antai left, right, bottomir topkreipsis į patronuojančios elementas, todėl, kad jei mes darome vaikas elementas skaidrus matome tai sėdi į dešinę tėvų apačioje:

Fiksuotas

fixedVertė yra panašus į absolute, kaip ji gali padėti jums poziciją elementas bet santykinis dokumento, tačiau ši vertė nekinta nemirksi. Žiūrėkite žemiau pateiktoje demonstracijoje pateiktą vaiko elementą ir tai, kaip slinkus jis toliau laikosi puslapio apačios:

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“	„Firefox“	T.Y	Briauna	„Safari“
4	2	7	12	3.1

Mobilusis / planšetinis kompiuteris

„Android Chrome“	„Android Firefox“	„Android“	„iOS Safari“
88	85	3	8

Lipnus

stickyVertė yra tarsi kompromisas tarp relativeir fixedvertybes. Šiuo metu tai yra eksperimentinė vertė, ty ji nėra oficialios specifikacijos dalis ir tik iš dalies pasirinkta naršyklė. Kitaip tariant, tikriausiai nėra geriausia idėja tai naudoti tiesioginės gamybos svetainėje.

Ką tai daro? Na, tai leidžia jums išdėstyti elementą, palyginti su viskuo, kas yra dokumente, o tada, kai vartotojas slinko pro tam tikrą peržiūros srities tašką, pataisykite elemento padėtį toje vietoje, kad jis išliktų nuolat rodomas kaip elementas su fixedvertė.

Paimkite šį pavyzdį:

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

Elementas bus santykinai išdėstytas tol, kol peržiūros srities slinkties vieta pasieks tašką, kuriame elementas bus 50pxnuo peržiūros srities viršaus. Tuo metu, elementas tampa lipnus ir išlieka vienu fixedpozicijos 50pxekrano viršuje.

Šis demonstracinis elementas iliustruoja tą tašką, kai viršutinė navigacija yra numatytasis relativepadėties nustatymas, o antroji navigacija yra nustatyta stickypačiame peržiūros srities viršuje. Atminkite, kad šio rašymo metu demonstracinė versija veiks tik „Chrome“, „Safari“ ir „Opera“.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.