CSS – plokkide positsioneerimine. Absoluutne ja suhteline positsioneerimine

Interneti-turundus

Sisukord:

CSS – plokkide positsioneerimine. Absoluutne ja suhteline positsioneerimine
CSS – plokkide positsioneerimine. Absoluutne ja suhteline positsioneerimine
Anonim

HTML-is saab kõik elemendid jagada plokk- ja sisesteks elementideks. Plokielemendid on tavaliselt kujutatud ristkülikukujuliste aladena, millel on teatud hulk teavet. Nende abiga ehitatakse lehe ruudustik. Sellised elemendid võtavad laiuselt kogu nende käsutuses oleva ruumi ning tavaliselt on nende ees ja järel reavahetus. Plokkidele saab määrata taande, horisontaalse ja vertikaalse suuruse.

Plokielementide omadused

Blokeeritud sildid sisaldavad silte, mis tõstavad esile suure hulga tekstilist teavet:,,

,

,

    . Märgendit kasutatakse sageli kaasaegsete saitide paigutuses ruudustiku loomiseks ja see tähendab lihts alt mingit plokki või konteinerit. Sellesse on lubatud pesastada muid silte, mis ei ole kõigi plokielementidega võimalik, seega on seda mugav kasutada. Plokid on tavaliselt virnastatud üksteise peale ega ole pesastatud sisestes elementides. HTML-i tekstisisesed elemendid on tekst ja selle jaoks kasutatakse CSS-i.kliirens.

    Antud sisulaiuse korral on ploki kogulaius parempoolse ja vasaku täidise, veeriste, ääriste ja laiuse väärtuste summa. Antud kõrgus – ülev alt ja alt polsterdus, veerised, äärised ja kõrgus. Plokielementide tekst on vaikimisi joondatud vasakule. Kui üks neist sisaldab sisemisi elemente koos plokielementidega, siis luuakse sisemiste elementide ümber anonüümne plokk. See kasutab vaikestiili. See pärib ka selle vanemale määratud stiili.

    Dokumendivoog

    Vool on lehe elementide kuvamise järjekord, mis on määratud CSS-is määratud omadustega. Samal ajal rivistatakse plokid vaikimisi ül alt alla ja tekstisisesed sildid, kui ruumi pole piisav alt, kantakse üle uuele reale ning asuvad ül alt alla ja vasakult paremale. Elemendi asukoht lehel oleneb selle kohast koodis: mida kõrgem see on, seda varem see asub. Iga plokielement näeb välja nagu ristkülik, mis lükkab naaberelemendid endast eemale. Saate seda käitumist muuta spetsiaalsete atribuutide abil. Teatud kastide CSS-i joondamist konteineri keskele või külgedele nimetatakse positsioneerimiseks.

    css keskus

    Elementide positsioneerimine

    Plokkide asukohta saab juhtida absoluutse ja suhtelise positsioneerimise abil. Positsioneerimist kasutatakse lehe suurtele lõikudele kindla koha andmiseks, keeruliste liideste, hüpikakende ja dekoratiivsete elementide loomiseks. Peamine omadus, mida kasutatakse plokkide paigutamiseksCSS – positsioon. Sellel on neli peamist omadust:

    • sugulane;
    • absoluutne;
    • parandatud;
    • staatiline.

    Nende abiga saate vahetada paigutusrežiime, määrates ühe neljast parameetrist: ülemine, parem, alumine või vasak. Samuti on olemas omadus kihtide tellimiseks - z-indeks. Staatilise omadusega positsioneerimist üldiselt ei kasutata, kuna see tähistab plokkide vaikepositsioneerimist. Seetõttu ei mõjuta mingite parameetrite kasutamine seda kuidagi. Ülejäänud kolme omadust kasutatakse paigutuse jaoks: suhteline, absoluutne, fikseeritud.

    Suhteline positsioneerimine

    Kastide suhteline paigutus CSS-is ehk positsioon: suhteline omadus tähendab, et elementi saab liigutada ja selle algset asukohta muuta. Selline plokk jääb ikka voolu sisse. Tegelikult pole ümberasustatud mitte tema, vaid tema koopia. Omaduste väärtused on seatud täpselt määrama, kui palju plokk ühes või teises suunas liigub. Tavaliselt mõõdetakse neid pikslites. Kuid teiste ühikute kasutamine on vastuvõetav.

    css joondus

    Atribuutide kasutamine suhtelise positsioneerimise jaoks

    Ülemine atribuut nihutab teatud ploki koopiat atribuudis määratud pikslite arvu võrra üles või alla. Selle kasutamisel jäävad allpool või üleval asuvad elemendid oma kohale, kuna tegelikult ei liigu ka nihutatud plokk kuhugi.

    Alumine omadus nihutab plokki ülemisele omadusele vastassuunas. Positiivne väärtus aitab seda üles tõsta janegatiivne - alla. Parem- ja vasakpoolsed omadused nihutavad elementi vastav alt paremale ja vasakule. Neid kõiki kombineerides saate määrata ploki täpse asukoha lehel, nihutades seda mööda vertikaalset ja horisontaalset koordinaattelge. Kui suurendate taandeid, ei arvutata neid mitte ploki enda servast, vaid selle küljele nihutatud koopiast.

    css vertikaalne joondus

    Absoluutne positsioneerimine

    Plokkide absoluutse positsioneerimise CSS-is määrab asukoha atribuudi absoluutväärtus. Absoluutselt positsioneeritud element langeb dokumendi voost välja ja selle asemele tulevad külgnevad plokid. Sellise elemendi laiust venitatakse sõltuv alt selle sisust ja seda saab liigutada, määrates teatud väärtused ülemisele, vasakule, paremale, alumisele omadustele. Plokkide absoluutne positsioneerimine CSS-is on kasulik pealkirjade jaoks. Kuid positsioon: absoluutne ei tööta mitte ainult plokielementide, vaid ka reaelementide puhul.

    Joonda elemendid keskele

    Positsioneeritud absoluutselt tekstisisene element käitub täpselt nagu tekstisisene element. Seetõttu saate positsioneerimise abil juhtida CSS-is ja tekstis. Saate sellele rakendada uusi omadusi, näiteks muuta kõrgust ja laiust. Tsentreerimine ja vertikaalne joondamine CSS-is kasutab mitme atribuudi kombinatsiooni. Juhib ülemise atribuudi vertikaalset joondamist. Kui soovite kasti CSS-is tsentreerida, peab põhikonteiner olema suhteliselt positsioneeritud ja joondatav element peab olema absoluutselt positsioneeritud. Konteiner tuleb seadistadatop atribuut: 50% ja elemendi liigutamiseks poole oma kõrgusest kasutage translatsiooni atribuuti väärtusega "0, -50%. Absoluutselt paigutatud elemente saab eraldada uut tüüpi, kuna neil on omadused, mis pole muud tüüpi positsioneerimise jaoks saadaval.

    css-ploki positsioneerimine

    Positsioneerimine brauseri vasaku ülanurga suhtes

    Vasak, ülemine, parem ja alumine atribuudid töötavad absoluutselt ja suhteliselt paigutatud elementidega erinev alt. Suhteliste elementide puhul määravad need omadused nihke elemendi asukoha suhtes. Absoluutselt paigutatud need võtavad ruumi konkreetse koordinaatsüsteemi suhtes, mis on seotud brauseriakna suurusega. Selle süsteemi lähtepunktid on akna nurgad. Vasakpoolse omaduse kasutamisel mõõdetakse polsterdust brauseri vasakust servast, kuid kerimisriba ei kuvata. Ülemine atribuut, kui see on absoluutselt paigutatud, seab polstri brauseri ülaosast selle elemendi ülaossa, millele see rakendatakse. Mõlema atribuudi kombineerimisel saab elementi brauseri vasaku ülanurga suhtes liigutada.

    css menüü

    Positsioneerimine brauseri parema ülanurga suhtes

    Samamoodi saate paremat ja ülemist atribuuti kasutades kinnitada elemendi brauseriakna paremale küljele ja muuta selle asukohta vertikaalselt, nihutades seda paremasse ülanurka. Kui õige omaduse väärtus on negatiivne, liigub plokk akna piirist kaugemale. Pärast seda peaks ilmuma kerimisriba. Nihutamisekselement alla, kasutatakse alumist omadust. See määrab polstri brauseriakna alumisest servast ploki alla. Kui see on määratud negatiivsele väärtusele, kuvatakse ka kerimisriba, kui element liigub brauseriakna allservast mööda.

    Koordinaatide süsteem absoluutseks positsioneerimiseks

    Vaikimisi on kõik absoluutse positsioneerimisega elemendid seotud ühe koordinaatsüsteemiga – brauseriaknaga. Kuid seda saab muuta, andes mõnele emaelemendile suhtelise asukoha. Seejärel muudab alamplokk oma asukohta olenev alt vanemast. Kui vanemelementide hulgas on mitu suhtelise positsioneerimisega elementi, siis loendatakse neist lähimast. Sel juhul on vaikepositsioneerimine kehasildis määratud.

    z-indeksi css omadus

    Absoluutselt paigutatud elemendi võrdluspunkt

    Enne elemendile absoluutse positsiooni määramist nimetati seda mõnes kohas kaudseks nullpunktiks. Kui te sellisele plokile atribuute ei määra, siis see ei liigu. Saate seda teisaldada, määrates marginaali atribuudi. See toimib sarnaselt positsioneerimisomadustega. Kui te ei määratle vasakpoolse atribuudi ja kõigi teiste väärtust, võrdub see autoga. Lisaks saate automaatset kasutades elemendid nende algsetesse kohtadesse tagastada.

    z-indeksi omadus

    Fikseeritud positsioneerimine

    Veel üks väärtus – fikseeritud. Positsiooni atribuut ankurdab elemendi kindlasse asukohta.Fikseeritud positsioneerimist kasutatakse sageli CSS-is menüüde loomiseks. See sarnaneb absoluutsele, kuid fikseeritud plokk langeb voost välja. Ka lehte kerides jääb selline element paigale, seega on seda mugav kasutada CSS-is menüüde koostamiseks. Seejärel ankurdatakse võrdluspunkt brauseriakna külge. Kui positsioneeritud plokke on mitu, kasutatakse nende korrastamiseks atribuuti z-indeks. Seda saab kasutada suhteliste plokkide alistamiseks absoluutarvudega, andes neile vastava indeksi, väljendatuna täisarvuna. Mida suurem see on, seda kõrgem on plokk.

Populaarne teema