CSS pozicionavimas yra daugiau nei tiesiog X, Y koordinatės
CSS pozicionavimas jau seniai yra svarbi svetainių išdėstymo dalis. Net ir dėl to, kad atsirado naujų CSS išdėstymo būdų, tokių kaip "Flexbox" ir "CSS Grid", pozicionavimas vis dar yra svarbus bet kokių interneto dizainerių maišų triukuose.
Naudodamiesi CSS padėtimi pirmas dalykas, kurį reikės padaryti, yra CSS nuosavybės nustatymas, kad pozicija būtų nurodoma naršyklei, jei ketinate naudoti tam tikrą elementą absoliučia arba santykine padėtimi. Jūs taip pat turite aiškiai 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
Statiškas yra bet kurio elemento tinklalapyje numatytoji pozicija. Jei nenurodysite elemento pozicijos, jis bus statinis. Tai reiškia, kad ji bus rodoma ekrane, atsižvelgiant į tai, kur ji yra HTML dokumente, ir kaip ji bus rodoma paprasto šio dokumento srauto viduje.
Jei taikysite pozicijos nustatymo taisykles, tokias kaip viršutinė arba kairėn elementui, turinčiam statinę poziciją, šios taisyklės bus ignoruojamos ir elementas išliks ten, kur jis pasirodys įprastame dokumentų sraute. Tiesą sakant, retai, jei kada nors reikės nustatyti elementą statinei pozicijai 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 netikru pozicijos objektu.
Kadangi visiškai pozicionuojamas elementas yra paimtas iš įprasto dokumento srauto, tai neturės įtakos tam, kaip elementai prieš jį arba po jo HTML yra tinklalapyje.
Pavyzdžiui, jei turite padalijimą, kuris buvo išdėstytas naudojant santykinę reikšmę (mes greitai pažvelgsime į šią reikšmę), o to paties skyriaus viduje turėjote pastraipą, kurią norėjote išdėstyti 50 pikselių iš skyriaus viršaus, jūs pridės "absoliutų" pozicijos vertę į tą pastraipą kartu su 50 px nuolaida į "top" nuosavybę, pvz., tokia.
pozicija: absoliutus; aukštyn: 50 px;Šis visiškai išdėstytas elementas tada visada rodys 50 pikselių nuo to santykinai išdėstyto padalinio viršaus, nesvarbu, kas dar yra ten įprasto srauto. Jūsų "absoliučiai" išdėstytas elementas naudojo santykinai išdėstytą kaip kontekstą, o naudojama vertė yra santykinė.
Keturios pozicionavimo savybės, kurias galite naudoti:
- viršuje
- teisus
- apačioje
- kairėje
Galite naudoti viršuje arba apačioje (nes elementas negali būti nustatytas pagal abu šiuos dydžius) ir dešinėn arba kairėn.
Jei elementas nustatytas į absoliučią poziciją, tačiau ten nėra ne statiškai išdėstytų protėvių, jis bus išdėstytas atsižvelgiant į kūno elementą, kuris yra aukščiausio lygio elementas puslapyje.
Santykinis pozicionavimas
Mes jau minėjome santykinį poziciją, todėl pažvelkime į tą nuosavybę dabar.
Santykinis pozicionavimas naudoja tas pačias keturias pozicionavimo savybes, kaip absoliutus pozicionavimas, tačiau vietoj elemento pozicijos pagrindo nustatymo jo artimiausio ne statiškai išdėstyto protėvio atžvilgiu jis prasideda nuo to, kur elementas būtų, jei jis vis dar būtų įprastame sraute.
Pvz., Jei jūsų tinklalapyje yra trys punktai, o trečiasis turi "pozicijos: santykinio" stiliaus, jo pozicija bus kompensuota atsižvelgiant į jo dabartinę vietą.
1 dalis.
2 dalis.
Paragraph 3.
Ankstesniame pavyzdyje trečioji pastraipa bus išdėstyta 2em iš konteinerio elemento kairės pusės, bet vis tiek bus žemiau pirmųjų dviejų pastraipų. Tai liktų įprastu dokumento srautu, o šiek tiek sumažėtų. Jei jį pakeitėte į poziciją: absoliutus; Tai, kas po jos, būtų rodoma ant jo, nes jis nebebus įprastu dokumento srautu.
Tinklalapio elementai dažnai naudojami nustatant pozicijos vertę: santykinė reikšmė, kai nenustatyta įskaitymo vertė, taigi elementas išlieka toje vietoje, kur jis būtų rodomas į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. Pavyzdžiui, jei jūsų svetainė yra klasifikuojama kaip "konteineris" (tai yra labai paplitęs žiniatinklio dizaino scenarijus), šis suskirstymas gali būti nustatytas kaip santykinė pozicija, kad ji galėtų naudoti bet kurią jos dalį tai kaip padėties kontekstas.
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 pereikite prie šio elemento.
Norėdami naudoti šią nuosavybės vertę, nustatykite:
vieta: fiksuota;Turėkite omenyje, kai nustatote elementą savo svetainėje, jis bus spausdinamas toje vietoje, kai atspausdinsite jūsų tinklalapį. Pavyzdžiui, jei jūsų elementas yra nustatytas 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 # first {pozicija: fixed; }} @media print {h1 # first {position: static; }}Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard 7/16/16.