CSS positsioneerimine on rohkem kui lihtsalt X, Y koordinaadid
CSS positsioneerimine on pikka aega olnud veebisaitide kujundamise loomisel oluline osa. Isegi CSS-i kujundamise uute tehnikate nagu Flexboxi ja CSS-võrgu tõusuga on positsioneerimisel endiselt oluline ükskõik milline veebidisainerite trikkide kott.
Kui kasutate CSS-i positsioneerimist, on esimene asi, mida peate tegema, on seada CSS-i vara positsioonile brauseri tellimiseks, kui soovid kasutada antud elemendi absoluutset või suhtelist positsioneerimist. Samuti peate selgelt mõistma nende kahe positsioneerimisomaduse erinevust.
Kuigi absoluutne ja suhteline on kaks CSS-positsiooni omadused, mida veebidisain kõige sagedamini kasutavad, on positsiooni omadused tegelikult neli riiki:
- staatiline
- absoluutne
- sugulane
- fikseeritud
Staatiline on veebisaidi mis tahes elemendi vaikeasukoht. Kui te ei määra elemendi asukohta, on see staatiline. See tähendab, et see kuvatakse ekraanil vastavalt sellele, kus see on HTML-dokumendis ja kuidas see kuvatakse selle dokumendi tavalises vooges .
Kui te rakendate positsioonieeskirju, näiteks staatilisel positsioonil oleval elemendil olevat ülemist või vasakut, ignoreeritakse neid reegleid ja element jääb sellesse, kus see kuvatakse tavapärases dokumendivoogus. Tõepoolest peaksite harva, kui üldse, CSS-i staatilisel positsioonil olema element, kuna see on vaikimisi väärtus.
Absoluutne CSS-i positsioneerimine
Absoluutne positsioneerimine on tõenäoliselt kõige lihtsam CSS-i positsioon, mida saaks aru saada. Alustad seda CSS-positsiooni vara:
ametikoht: absoluutne;See väärtus näitab brauserile, et kõik, mida postitatakse, tuleks dokumendi tavapärasest voolust eemaldada ja paigutada selle asemel lehele täpsesse asukohta. See arvutatakse selle elemendi lähim mitte staatiliselt asetseva esivanema alusel.
Kuna absoluutselt asetatud element võetakse dokumendi tavapärasest voolust välja, ei mõjuta see seda, kuidas elemendid enne seda või pärast seda HTML-is asuvad veebilehel.
Näiteks - kui teil oli suhtelise väärtusega positsioonis asetsev jagunemine (vaatame selle väärtuse varsti) ja selles jagunemisosas oli teil lõik, mida soovisite jagada 50 pikslit, siis lisaks sellele lõigule "absoluutse" positsiooni väärtuse koos 50-kordse positsiooniväärtuse väärtusega "tipp", nagu see on.
ametikoht: absoluutne; top: 50px;See täiesti asetsev element oleks siis alati 50 pikslit selle suhteliselt positsiooni jagamise tipust - olenemata sellest, mida veel tavalises voolus. Teie "absoluutselt" asetatud element kasutab suhteliselt positsioneeritud ühte konteksti ja kasutatav positsiooniväärtus on selle suhteline.
Neli positsioneerimisomadust, mida saate kasutada, on järgmised:
- üleval
- õige
- põhja
- lahkus
Võite kasutada kas ülalt või alt (kuna elementi ei saa mõlema väärtuse järgi paigutada) ja paremal või vasakul.
Kui element on seatud absoluutsele positsioonile, kuid seal ei ole mitte staatiliselt asetatud esivanemaid, siis see asetatakse keeleele, mis on lehe kõrgeima taseme elemendi suhtes.
Suhteline positsioneerimine
Oleme juba maininud suhtelist positsioneerimist, nii et vaatame seda vara praegu.
Suhteline positsioneerimine kasutab absoluutse positsioneerimisega samasuguseid nelja positsioneerimisomadusi, kuid selle asemel, et asendada elemendi positsioon tema kõige lähemal mitte staatiliselt asetsevale esivanemale, algab see sellest, kus element oleks, kui see oleks ikka veel tavalises voolus.
Näiteks kui teie veebisaidil on kolm paragrahvi ja kolmandal on sellel asetatud positsioon: suhteline stiil, selle positsioon korvatakse selle praeguse asukoha põhjal.
Lõige 1.
Lõige 2.
punkt 3.
Ülaltoodud näites paigutatakse kolmanda lõigu konteinerielemendi vasakust servast 2em, kuid see jääb siiski kahe esimese lõigu alla. See jääb dokumendi tavapäraseks vooluks ja lihtsalt kompenseeritakse veidi. Kui sa muutsid selle positsioonile: absoluutne; See peaks järgnema sellele järgnevale küljele, sest see ei peaks enam olema dokumendi tavalises voolus.
Veebisaidi elemente kasutatakse sageli positsiooni väärtuse määramiseks: suhteline, kus ei ole kehtestatud nihketähtpäeva väärtust, mis tähendab, et element jääb täpselt sellesse, kus see ilmub tavapärasel voolul. Seda tehakse üksnes selle elemendi konteksti kindlaksmääramiseks, mille vastu teisi elemente saab täiesti paigutada. Näiteks kui teil on teie kogu veebisaiti jagatud klassi väärtusega "konteiner" (mis on veebis disainis väga tavaline stsenaarium), võib selle jaotuse määrata suhtelise positsiooni suunas, nii et kõik selle sees võib seda kasutada see on positsioneerimise kontekst.
Mis on fikseeritud positsioneerimise kohta?
Fikseeritud positsioneerimine on palju nagu absoluutne positsioneerimine. Elemendi positsioon arvutatakse samamoodi nagu absoluutmudel, kuid fikseeritud elemendid fikseeritakse selles asukohas - peaaegu nagu vesimärk . Kõik muu lehel kuvatakse seejärel selle elemendi mööda.
Selle vara väärtuse kasutamiseks määrake:
asukoht: fikseeritud;Pidage meeles, et kui teie saidil elementi tehakse kindlaks, siis prinditakse see veebilehel, kui teie veebileht välja trükitakse. Näiteks kui teie element on teie lehe ülaosas fikseeritud, ilmub see iga trükitud lehe ülaosale, kuna see on lehe ülaosas fikseeritud. Meediumitüüpide abil saate muuta trükitud lehtede kuvatavaid elemente:
@mediaekraan {h1 # first {positsioon: kinnitatud; }} @media print {h1 # first {position: static; }}Jennifer Krynini algne artikkel. Redigeeris Jeremy Girard 1./7/16.