CSS-paikannus on enemmän kuin vain X, Y-koordinaatit
CSS-paikannus on jo pitkään ollut tärkeä osa sivuston ulkoasujen luomista. Jopa nousemalla uudempia CSS-taitotekniikoita, kuten Flexbox ja CSS Grid, paikannus on edelleen tärkeä paikka mistä tahansa web-suunnittelija laukusta temppuja.
Kun käytät CSS-paikannusta, sinun on ensin luotava CSS-ominaisuus sijaintiin, jotta kerrot selille, jos aiot käyttää absoluuttista tai suhteellista paikannusta tietylle elementille. Sinun on myös ymmärrettävä selkeästi näiden kahden paikannusominaisuuden ero.
Vaikka absoluuttinen ja suhteellinen ovat kahden CSS-sijaintiominaisuuden, joita käytetään useimmiten web-suunnittelussa, sijaintilaatuun on todellisuudessa neljä tilaa:
- staattinen
- absoluuttinen
- suhteellinen
- kiinteä
Staattinen on oletusasema mille tahansa elementille verkkosivulla. Jos et määritä elementin sijaintia, se on staattinen. Tämä tarkoittaa sitä, että se näkyy näytössä sen mukaan, missä se on HTML-asiakirjassa ja miten se näkyy kyseisen asiakirjan normaalivirrassa .
Jos käytät paikannussääntöjä, kuten ylhäältä tai vasemmalta elementtiin, jossa on staattinen sijainti, nämä säännöt ohitetaan ja elementti pysyy siellä, missä se näkyy tavallisessa asiakirjavirrassa. Todellisuudessa, sinun olisi harvoin, joskus, täytyy asettaa elementti staattiseen sijaintiin CSS: ssä, koska se on oletusarvo.
Absoluuttinen CSS-paikannus
Absoluuttinen paikannus on luultavasti helpoin CSS-asema ymmärtää. Aloit tämän CSS-sijainti-ominaisuuden avulla:
asema: absoluuttinen;Tämä arvo kertoo selaimelle, että kaikki, mitä tulee sijoitettavaksi, on poistettava asiakirjan normaalista virrasta ja sijoitettava sen sijaan tarkkaan kohtaan sivulla. Tämä lasketaan perustuen kyseisen elementin lähimpään ei-staattisesti sijoitettuun esi-iseen.
Koska ehdottomasti sijoitettu elementti poistetaan asiakirjan normaalista virrasta, se ei vaikuta siihen, miten elementit ennen sitä tai sen jälkeen HTML: ssä sijaitsevat verkkosivulla.
Esimerkkinä - jos sinulla oli jako, joka sijoitettiin suhteellisen arvon avulla (me tarkastelemme tätä arvoa pian), ja tämän jakson sisällä sinulla oli kohta, jonka halusit sijoittaa 50 pikseliä divisioonan yläosasta. lisäisi kyseiselle kappaleelle "absoluuttisen" aseman arvon sekä 50 px: n offset-arvon "ylhäältä" ominaisuudella, kuten tämä.
asema: absoluuttinen; alkuun: 50px;Tämä ehdottomasti sijoitettu elementti näyttäisi aina aina 50 pikseliä suhteellisen jakautuneen alueen yläosasta - ei väliä mitä muuta näkyy normaalivirtauksessa. Sinun "ehdottomasti" sijoitettu elementti käytti suhteellisen sijoitettua kontekstiään ja positiivinen arvo jota käytät on suhteellinen siihen.
Käytettävissäsi olevat neljä paikannusominaisuutta ovat:
- ylin
- oikea
- pohja
- vasen
Voit käyttää joko ylhäältä tai alhaalta (koska elementtiä ei voi sijoittaa molempien arvojen mukaan) ja joko oikealle tai vasemmalle.
Jos elementti asetetaan absoluuttiseen asemaan, mutta siinä ei ole ei-staattisesti sijoitettuja esi-isiä, se sijoitetaan suhteessa runkoelementtiin, joka on sivun korkeimman tason elementti.
Suhteellinen paikannus
Mainitsimme jo suhteellisen sijainnin, joten katsokaamme nyt sitä omaisuutta.
Suhteellinen paikannus käyttää samoja neljää paikannusominaisuutta kuin absoluuttinen paikannus, mutta sen sijaan, että elementin asema sen lähimpään ei-staattisesti sijoitettuun esi-iseen perustuisi, alkaa siitä, missä elementti olisi, jos se olisi edelleen normaalivirrassa.
Esimerkiksi, jos sinulla on kolme kohtaa verkkosivustossasi ja kolmas on siihen sijoitettu "asema: suhteellinen" tyyli, sen sijaintia muutetaan sen nykyisen sijainnin mukaan.
1 kohta.
2 kohta.
Edellä olevassa esimerkissä kolmas kappale asetetaan säiliöosan vasemmalle puolelle, mutta se on edelleen kahden ensimmäisen kohdan alapuolella. Se pysyisi asiakirjan normaalissa virrassa, ja se olisi vain hieman pienempi. Jos muutit asemaan: absoluuttinen; mikä tahansa seikka sen jälkeen näkyy sen yläpuolella, koska se ei enää olisi asiakirjan tavanomaisessa virrassa.
Verkkosivun elementtejä käytetään usein aseman sijainnin määrittämiseen: suhteellinen ilman määritettyä offset-arvoa, mikä tarkoittaa, että elementti pysyy tarkalleen missä se näyttäisi normaalivirtaukselta. Tämä tehdään yksinomaan tämän elementin määrittelemiseksi kontekstiksi, jota vastaan muut elementit voidaan sijoittaa ehdottomasti. Esimerkiksi jos sinulla on alue, joka ympäröi koko verkkosivustosi luokkien arvolla "kontti" (joka on hyvin yleinen skenaario web-suunnittelussa), jako voidaan asettaa suhteelliseen asemaan niin, että mikä tahansa sen sisällä voi käyttää se paikannusympäristönä.
Entä kiinteä paikannus?
Kiinteä paikannus on paljon kuin absoluuttinen paikannus. Elementin sijainti lasketaan samalla tavoin kuin absoluuttinen malli, mutta kiinteät elementit kiinnitetään sitten kyseiseen paikkaan - melkein kuin vesileima . Kaikki muut sivut selaa tämän elementin ohi.
Voit käyttää tätä ominaisuutta arvoa asettaessasi:
asema: kiinteä;Muista, että kun korjataan elementti sivustoosi, se tulostaa sinne, kun Web-sivu tulostetaan. Jos esimerkiksi elementti on korjattu sivun yläosassa, se näkyy jokaisen tulostetun sivun yläosassa - koska se on kiinnitetty sivun yläosaan. Voit käyttää mediatyyppejä muuttamaan tulostettujen sivujen näyttöä kiinteistä osista:
@ media-näyttö {h1 # first {position: kiinteä; }} @media print {h1 # first {position: staattinen; }}Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 16.7.16.