Absoliutus ir santykinis - CSS pozicionavimo paaiškinimas

CSS pozicionavimas jau seniai yra svarbi svetainių išdėstymo dalis. Net su CSS išdėstymo metodų, tokių kaip "Flexbox" ir "CSS Grid", kilimu, pozicija vis dar yra svarbi bet kokio interneto dizaino krepšyje.

Naudodamiesi CSS padėtimi, pirmiausia turite nustatyti CSS nuosavybę, kad pozicija praneštų nariui, ar ketinate naudoti tam tikrą elementą absoliučia ar santykine padėtimi. Jūs taip pat turite suprasti skirtumą tarp šių dviejų pozicionavimo savybių.

Nors absoliutus ir santykinis yra dvi CSS pozicijos savybės, dažniausiai naudojamos žiniatinklyje, iš tikrųjų yra keturios būsenos savybės:

• statinis
• absoliutus
• santykinis
• fiksuotas

Statinis padėties nustatymas

Statiškas yra bet kurio elemento tinklalapyje numatytoji pozicija. Jei neapibrėžiate elemento pozicijos, jis yra statinis, o tai reiškia, kad jis rodomas ekrane, atsižvelgiant į tai, kur jis yra HTML dokumente, ir kaip jis rodomas įprasto šio dokumento srauto viduje.

Jei taikysite pozicionavimo taisykles, pvz., viršuje arba kairėje elementui, turinčiam statinę padėtį, šios taisyklės nepaisomos, o elementas lieka ten, kur jis pasirodo įprastame dokumentų sraute. Retai, jei kada nors reikia, elementą reikia nustatyti statine pozicija CSS, nes tai yra numatytoji reikšmė.

Absoliutus CSS pozicionavimas

Absoliutus pozicionavimas tikriausiai yra paprasčiausias CSS padėtis suprasti. Pradedate nuo šio CSS pozicijos savybių:

pozicija: absoliutus;

Ši vertė nurodo naršyklei, kad viskas, ko ketinama išdėstyti, turėtų būti pašalintas iš įprasto dokumento srauto ir vietoj to dedamas į tikslią puslapio vietą. Tai apskaičiuojama remiantis artimiausiu neastatiškai išdėstyto protėvio elementu. Kadangi visiškai pozicionuojamas elementas yra paimtas iš įprasto dokumento srauto, tai daro įtaką, kaip elementai prieš jį arba po jo HTML yra svetainėje.

Pavyzdžiui, jei turite padalijimą, kuris yra išdėstytas naudojant santykinę reikšmę ir jo viduje, jūs turite pastraipą, į kurią norite išdėstyti 50 pikselių iš skyriaus viršaus, pridedate pozicijos reikšmę absoliutus į tą dalį kartu su 50 piks ant viršuje turtas, toks:

pozicija: absoliutus;aukštyn: 50 px;

Šis visiškai pozicionuojamas elementas visuomet rodo 50 pikselių nuo to santykinai išdėstyto padalinio viršaus, nesvarbu, koks dar yra ten įprasto srauto. Jūsų visiškai pozicionuojamas elementas naudoja santykinai išdėstytą kontekstą, o jūsų naudojama pozicijos vertė yra lygi.

Keturios pozicionavimo savybės, kurias galite naudoti:

• viršuje
• teisus
• apačioje
• kairėje

Galite naudoti arba viršuje arba apačioje - kadangi elementas negali būti išdėstytas pagal abiejų šių verčių - ir taip teisus arba kairėje.

Jei elementas yra nustatytas į absoliučią poziciją, tačiau neturi jokių neteisingai išdėstytų protėvių, jis yra išdėstytas atsižvelgiant į kūno elementą, kuris yra aukščiausio lygio elementas puslapyje.

Santykinis pozicionavimas

Santykinis pozicionavimas naudoja tas pačias keturias pozicionavimo savybes kaip absoliutus pozicionavimas, bet vietoj elemento pozicijos pagrindo nustatymo jo artimiausio ne statiškai išdėstyto protėvio atveju jis prasideda nuo to, kur elementas būtų, jei jis vis dar būtų įprastame sraute.

Pavyzdžiui, jei jūsų tinklalapyje yra trys pastraipos, o trečioji - pozicija: santykinė ant jo esantis stilius, jo pozicija yra kompensuota atsižvelgiant į jo dabartinę vietą.

1 dalis.

2 dalis.

3 dalis.

Pirmiau pateiktame pavyzdyje trečioji pastraipa yra 2em iš konteinerio elemento kairės pusės, bet vis tiek žemiau pirmųjų dviejų dalių. Jis lieka įprastu dokumento srautu ir šiek tiek kompensuojamas. Jei pakeisite į pozicija: absoliutus, viskas po jo rodoma ant jo, nes jis nebepriklauso įprastam dokumento srautui.

Tinklalapio elementai dažnai naudojami nustatant "" vertę pozicija: santykinė be jokios įskaitytos vertės, o tai reiškia, kad elementas išlieka toje vietoje, kur jis atsiranda įprastu srautu. Tai daroma tik siekiant nustatyti, kad šis elementas yra kontekstas, kurio atžvilgiu kiti elementai gali būti visiškai išdėstyti. Pvz., Jei turite visą jūsų svetainę suskirstytą klasę, kurioje yra klasė konteineris, kuris yra bendras web dizaino scenarijus, šis suskirstymas gali būti nustatytas kaip pozicija santykinis kad bet koks jo viduje galėtų jį naudoti kaip padėties kontekstą.

Ką apie fiksuotą pozicionavimą?

Fiksuotas pozicionavimas yra labai panašus į absoliučią poziciją. Elemento pozicija apskaičiuojama taip pat, kaip ir absoliutus modelis, tačiau fiksuotos dalys tuoj pat fiksuojamos toje vietoje - beveik kaip vandens ženklas. Viskas, kas yra puslapyje, tada slinkties eina per tą elementą.

Norėdami naudoti šią nuosavybės vertę, nustatykite:

vieta: fiksuota;

Turėkite omenyje, kai nustatote elementą savo svetainėje, jis atspausdinamas toje vietoje, kai jūsų tinklalapis išspausdintas. Pavyzdžiui, jei jūsų elementas yra fiksuotas puslapio viršuje, jis bus rodomas kiekvieno atspausdinto puslapio viršuje, nes jis yra pritvirtintas prie puslapio viršuje. Galite naudoti žiniasklaidos tipus, kad pakeistumėte, kaip spausdinami puslapiai rodomi fiksuoti elementai:

@media screen { h1 # pirmas (vieta: fiksuotas; } } @media print { h1 # pirmas (pozicija: statiška; } }