Viimeisin päivitys: 28.04.2016

CSS tarjoaa elementin paikannusominaisuudet, mikä tarkoittaa, että voimme sijoittaa elementin tiettyyn paikkaan sivulla.

Pääominaisuus, joka ohjaa paikannusta CSS:ssä, on sijaintiominaisuus. Tällä ominaisuudella voi olla jokin seuraavista arvoista:

staattinen: vakioelementtien sijoittelu, oletusarvo

absoluuttinen: elementti on sijoitettu suhteessa säiliöelementin rajoihin, jos sen sijaintiominaisuus ei ole staattinen

suhteellinen : Elementti on sijoitettu suhteessa sen oletuspaikkaan. Tyypillisesti suhteellisen paikantamisen päätarkoitus ei ole siirtää elementtiä, vaan luoda uusi ankkuripiste sen sisäkkäisten elementtien absoluuttiselle sijoittelulle.

kiinteä: elementti on sijoitettu suhteessa selainikkunaan, jolloin voit luoda kiinteitä elementtejä, jotka eivät muuta sijaintia vierittäessä

Älä käytä elementtiin samanaikaisesti float-ominaisuutta ja muuta paikannustyyppiä kuin staattista (eli oletustyyppiä).

Absoluuttinen asemointi

Selaimen katselualueella on ylä-, ala-, oikea ja vasen reuna. Jokaisella näistä neljästä reunasta on vastaava CSS-ominaisuus: vasen, oikea, ylä- ja alaosa. Näiden ominaisuuksien arvot on määritetty pikseleinä, emeinä tai prosentteina. Ei ole tarpeen asettaa arvoja kaikille neljälle sivulle. Yleensä asetetaan vain kaksi arvoa - sisennys yläreunan yläreunasta ja sisennys vasemmasta reunasta vasemmalle.

HEI MAAILMA

Tässä absoluuttinen sijoitettu div on 100 pikseliä kuvaportin reunan vasemmalla puolella ja 50 pikseliä alhaalta.

Ei ole niin tärkeää, että tämän div-elementin jälkeen on joitain muita elementtejä. Tämä div-lohko sijoitetaan joka tapauksessa suhteessa selaimen näkymän rajoihin.

Jos elementti, jolla on absoluuttinen sijainti, sijaitsee toisessa säilössä, jonka sijaintiominaisuuden arvo ei ole yhtä suuri kuin static , elementti sijoitetaan suhteessa säiliön rajoihin:

Suhteellinen sijoittelu

Suhteellinen paikannus määritetään myös käyttämällä suhteellista arvoa. Määrittääksesi tietyn sijainnin, johon elementti siirretään, käytetään samoja ylä-, vasen-, oikea- ja alaominaisuuksia:

z-indeksi ominaisuus

Oletuksena, kun kahdella elementillä on sama reunus, html-merkinnöissä viimeksi määritetty elementti näytetään toistensa päällä. Kuitenkin z-index-ominaisuuden avulla voit muuttaa elementtien järjestystä, kun ne ovat päällekkäin. Omaisuus ottaa arvokseen luvun. Elementit, joilla on suurempi z-indeksiarvo, näkyvät elementtien päällä, joilla on pienempi z-indeksiarvo.

Esimerkiksi:

Lisätään nyt uusi sääntö redBlock-lohkotyyliin:

RedBlock(z-indeksi: 100; sijainti: absoluuttinen; ylhäällä: 20px; vasen: 50px; leveys: 80px; korkeus: 80px; taustaväri: punainen; )

Tässä z-indeksi on 100. Mutta sen ei tarvitse olla numero 100. Koska toisella lohkolla on määrittelemätön z-indeksi ja se on itse asiassa nolla, redBlockille voimme asettaa z-indeksin ominaisuuden mihin tahansa arvoon, joka on suurempi kuin nolla.

Ja nyt ensimmäinen lohko menee päällekkäin toisen kanssa, eikä päinvastoin, kuten alussa.

Nykyään verkkokehittäjät voivat rakentaa monimutkaisia ​​verkkosivujen asetteluja käyttämällä erilaisia ​​CSS-tekniikoita. Joillakin näistä tekniikoista on pitkä historia (kelluva), toiset (flexbox) ovat saavuttaneet suosiota viime vuosina.

Tässä artikkelissa tarkastellaan lähemmin joitain vähän tunnettuja asioita CSS-paikannuksesta.

Ennen kuin aloitamme, käydään lyhyesti läpi erilaisten paikannustyyppien perusasiat.

Yleiskatsaus käytettävissä oleviin paikannusmenetelmiin

CSS-sijaintiominaisuus määrittää elementin paikannustyypin.

Paikannusvaihtoehdot

staattinen on oletuspaikannusominaisuuden arvo. Suosittelemme, että tämä elementti ei käytä paikannusta - paikannusta käytetään vain, jos määrität muun kuin oletusasetuksen tyypin.

Voit tehdä tämän määrittämällä sijaintiominaisuuden johonkin seuraavista arvoista:

• suhteellinen
• ehdoton
• korjattu
• tahmea

Ja vasta sijoituksen asettamisen jälkeen voit käyttää ominaisuuksia, jotka siirtävät elementin:

• oikein
• pohja
• Näiden ominaisuuksien alkuarvo on automaattinen avainsana.

On otettava huomioon, että jos elementin sijainti-ominaisuuden arvo on absoluuttinen tai kiinteä , niin se on absoluuttisesti sijoitettu elementti. Myös z-indeksiominaisuus alkaa toimia sijoitetuille elementeille, mikä määrittää pinoamisjärjestyksen.

Erot pääasemointimenetelmien välillä

Katsotaanpa nyt nopeasti kolmea peruseroa käytettävissä olevien paikannustyyppien välillä:

• Absoluuttisesti (absoluuttisesti) sijoitetut elementit poistetaan kokonaan virrasta, niiden paikan ottavat lähimmät naapurit.
• suhteellisesti sijoitetut (suhteelliset) ja liimatut (tahmeat) säilyttävät paikkansa virtauksessa eivätkä lähimmät naapurit vie sitä. Näiden elementtien pehmusteet eivät kuitenkaan vie tilaa, vaan muut elementit jättävät sen kokonaan huomiotta, mikä voi johtaa päällekkäisiin elementteihin.
• kiinteät elementit (ja kiinteä paikannus on eräänlainen absoluuttinen) sijoitetaan aina suhteessa näkyvyysalueeseen (jättäen huomioimatta paikantamisen esivanhemmissa), kun taas tahmeat elementit sijoitetaan suhteessa lähimpään esi-isään vierittämällä (ylivuoto: auto). Ja vain tällaisten esi-isten puuttuessa ne sijoitetaan suhteessa näkyvyysalueeseen.

Voit nähdä tämän tarkemmin demossa:

Huomautus: Sticky-paikannus on edelleen kokeellinen tekniikka, jota selaimissa tuetaan rajoitetusti. Tietenkin, jos haluat, voit lisätä tämän toiminnon selaimeen monitäytteellä, mutta koska sen yleisyys on alhainen, tätä ominaisuutta ei käsitellä artikkelissa.

Asemointielementit absoluuttisella asemointityypillä

Olen varma, että useimmat ihmiset tietävät kuinka absoluuttinen paikannus toimii. Monet asiat voivat kuitenkin hämmentää aloittelijaa.

Siksi päätin aloittaa siitä, kun kuvailen paikantamisen vähän tunnettuja ominaisuuksia.

Absoluuttisesti sijoitettu elementti on siis siirtynyt lähimpään sijoitetun esi-isänsä suhteen. Tietenkin tämä toimii, jos jollakin esivanhemmista on jokin muu sijainti kuin staattinen - jos elementillä ei ole sijoitettuja esivanhempia, se on siirretty suhteessa näkyvyysalueeseen.

Tämän osoittaa seuraava esimerkki:

Tässä esittelyssä vihreä lohko on alun perin sijoitettu täysin nollapehmusteella pohja:0 ja vasen:0 , sen esi-isä (punainen lohko) ei ollut sijoitettu ollenkaan.

Olemme kuitenkin sijoittaneet suhteellisen ulomman kääreen (elementti, jossa on luokan jumbotron). Huomaa, kuinka vihreän lohkon sijainti muuttuu, kun sen esi-isien paikannustyyppi muuttuu.

Absoluuttisesti sijoitetut elementit jättävät float-ominaisuuden huomiotta

Jos käytämme kelluvaan elementtiin absoluuttista tai kiinteää paikannusta, float-ominaisuuden arvoksi tulee none . Toisaalta, jos asetamme suhteellisen sijainnin, elementti jää kellumaan.

Katso vastaava demo:

Tässä esimerkissä määrittelemme kaksi eri elementtiä, jotka kelluvat oikealle. Huomaa, että kun punainen lohko tulee absoluuttisesti sijoittuneeksi, se jättää huomioimatta float-ominaisuuden arvon, kun taas suhteellisen sijoitettu vihreä lohko säilyttää float-arvon.

Absoluuttisesti sijoitetuista rivielementeistä tulee lohkoelementtejä

Absoluuttisella tai kiinteällä sijainnilla oleva rivielementti saa lohkoelementin ominaisuudet. Sisäisten elementtien muuntaminen lohkoelementeiksi on kuvattu tarkemmin taulukossa.

Tässä tapauksessa loimme kaksi eri elementtiä. Ensimmäinen (vihreä lohko) on lohkoelementti ja toinen (punainen lohko) on rivielementti. Aluksi vain vihreä lohko on näkyvissä.

Punainen laatikko ei ole näkyvissä, koska sen leveys- ja korkeusominaisuudet toimivat vain lohko- ja inline-block-elementtien kanssa, ja koska sillä ei ole sisältöä, sillä ei ole mittoja.

Kun määrität punaiselle lohkolle absoluuttisen tai kiinteän sijainnin, siitä tulee lohkolohko ja siinä määritetyt lohkokoot tulevat voimaan.

Absoluuttisesti sijoitetuissa elementeissä ei ole pehmusteen romahtamista

Oletusarvoisesti, kun kaksi pystysuoraa marginaalia koskettavat, ne yhdistetään yhdeksi, joka on yhtä suuri kuin niiden enimmäismäärä. Tätä kutsutaan marginaalin romahtamiseksi.

Absoluuttisesti sijoitettujen elementtien käyttäytyminen tässä on samanlainen kuin kelluvat elementit - niiden pehmustetta ei yhdistetä naapureihinsa.

Tässä demossa elementille annetaan 20 pikselin täyte. Sen täyttö kutistuu yläelementin täyteen kanssa, joka on myös 20 pikseliä. Kuten näet, vain absoluuttisella sijainnilla ei ole romahtamista.

Mutta kuinka voimme estää marginaalien romahtamisen? Meidän on tehtävä jonkinlainen erotin niiden väliin.

Tämä voi olla täyte tai reunus, ja sitä voidaan soveltaa sekä ylä- että alaelementteihin. Toinen vaihtoehto on lisätä pääelementtiin clearfix.

Elementtien sijoittaminen pikseleillä ja prosentteilla

Oletko koskaan käyttänyt prosenttiosuuksia pikseleiden sijasta elementtien sijoittamiseen? Jos vastaus on kyllä, tiedät, että elementin siirtymä riippuu valituista yksiköistä (pikseleistä tai prosenteista).

Se on vähän hämmentävää, eikö? Joten katsotaan ensin, mitä spesifikaatio sanoo prosenttisiirrosta:

Poikkeama prosentteina päälohkon leveydestä (vasemmalle ja oikealle) tai korkeudelle (ylä- tai alaosa). Liimattujen elementtien osalta siirtymä lasketaan prosentteina virtauksen leveydestä (vasemmalle ja oikealle) tai korkeudelle (ylä- tai alaosa). Negatiiviset arvot ovat hyväksyttäviä.

Kuten mainittiin, kun asetat siirtymän prosentteina, elementin sijainti riippuu sen yläosan leveydestä ja korkeudesta.

Demo näyttää tämän eron:

Tässä esimerkissä käytetään pikseleitä ja prosenttiosuuksia siirtymiseen. Tietenkin, kun määrität siirtymän pikseleinä, elementti siirretään sinne, missä sitä tarvitaan.

Ja jos valitsemme prosenttiosuuden siirtymälle, tulos riippuu pääelementin koosta. Tässä on visualisointi, joka näyttää kuinka uusi sijainti lasketaan:

Huomaa: Kuten luultavasti tiedät, muunnosominaisuus (erilaisten käännöstoimintojen ohella) mahdollistaa myös elementin paikan muuttamisen. Mutta tässä tapauksessa prosenttiosuuksia käytettäessä laskenta perustuu itse elementin kokoon, ei sen emoelementin kokoon.

Johtopäätös

Toivon, että tämä artikkeli on auttanut sinua ymmärtämään paikannusta CSS:ssä ja selventänyt joitain haasteita.

On tarpeen siirtää (raahaa, kääntää jne.) 3 peruskiveä 300x600x2400 vähintään 3-5 metriä. Ongelmana on, että ne sijaitsevat talon takana, eikä nosturia tai muita erikoislaitteita ole saatavilla.
Myöhemmin halusin käyttää lohkoja verannan rakentamiseen. Mutta nyt minun täytyy vain vapauttaa tilaa, jossa he makaavat - suunnittelen huvimajan sinne.
Jokaisen paino (jos laskin oikein) on noin 1 tonni. Onko ajatuksia tästä?

Kyllä, se ei ole helppoa, mutta se on toteutettavissa. Anoppini ja minä otimme tavallisen auton tunkin ja useita, näyttää siltä, ​​​​kahden tuuman putkia ja sorkkaraudan. Kolme lohkoamme makasi myös epämukavassa paikassa, siirsimme niitä noin 15 metriä Teimme näin: Lohkon reunan alle (ne makasivat sen kyljessä, eli sen leveimmässä reunassa) kaivoimme riittävän syvän tunkille. ja käsi kulkea läpi, joten se pumppaa hänen vipuaan. Pieni pala litteää lautaa asetettiin reiän pohjalle, jotta se ei tahrannut tunkkia ja jotta se ei kaivautuisi maahan kuormitettuna. Seuraavaksi lohko nostettiin varsin nätisti yhdestä reunasta työntämällä sitä alhaalta tunkilla. En tiedä tarkalleen missä kulmassa, suhteessa maahan, mutta niin, että lohkon alle saadaan tasaisesti useita puolimetrisiä putkenpalasia. Sitten tunkki laskettiin alas ja lohko asetettiin putkien päälle ja tasoitettiin suhteessa maan pintaan. Seuraavaksi putken pisimpään osaan (n. 1,8 m) työnnettiin sorkkatanko, jota ei asetettu lohkon alle (jäykkyyden vuoksi) ja tätä hybridiä käytettiin vivuna, ajettiin se lohkon toisen pään alle ja nostettiin suhteessa maahan (lisäämällä vivun ja maan välistä kulmaa) työnsivät lohkoa ikään kuin poispäin itsestään. Egyptin pyramidien liikkuvien lohkojen periaate. Teloina käytettiin vain hirsien sijasta putkia. Jos maaperä on nestemäistä, voit ensin asettaa pitkiä litteitä lautoja putkien alle ennen tunkin laskemista, jotta lohkon paino ei peitä putkia. Työnnämme unohtamatta asettaa uutta putkea lohkon "keulan" alle ja valmistelemme irrotettua putkea "perän" alta seuraavaksi keulan alle.
Kaiken kaikkiaan rullasimme näitä lohkoja 3 vuotta joka kesä, kunnes vieritimme ne portille. Kaikki ajattelivat käyttää niitä, mutta eivät koskaan keksineet sitä. Tilasimme manipulaattorin, hän latasi ne itselleen suoraan portilla ja vei ne tuntemattomaan suuntaan maksua vastaan.
Vaikeuksia syntyy käännöksissä jos niitä on, mutta kaikki on myös mahdollista, jos lyö vasaralla putkiin lohkon alla, antaa niille suunnan ja säädä lohkon asentoa vivulla sivuilta. Se tuntuu vain raskaalta, mutta sitten siihen tottuu.

P.S. Erityisesti näitä lohkoja varten ostamamme vinssi auttoi paljon. Vinssin koukku voidaan kiinnittää aidan pylväisiin (meidän kesti hyvin) ja vinssillä voidaan vetää lohkot putkien läpi näihin pylväisiin. Lohkossa tulisi olla 2 vahvikekorvaketta, joten vinssi kiinnitettiin niihin. Tämä on helpompaa kuin vivulla työntäminen, mutta kestää kauemmin ja vaatii myös paljon vaivaa - koko ajan täytyy juosta ympäriinsä koukuttaen vinssiä seuraavaan tolppaan.

P.P.S. Selitin parhaani mukaan - anteeksi.

Kun asetat lohkosuhteen, sinun on asetettava ominaisuus asema: suhteellinen ja siirtymäominaisuudet. Tässä tapauksessa siirtymä ei tapahdu suhteessa "emo"-elementtiin (kuten absoluuttisessa sijoittelussa), vaan suhteessa itse lohkoon normaalissa virtauksessa. Tämä selviää esimerkin avulla. Oletetaan, että meillä on HTML-sivu, jossa on kolme div:tä:

Suhteellinen sijoittelu

Asetetaan näiden lohkojen koot ja rajat tyylisivulla:

#blok1, #blok2, #blok3 (reunus: 1px tasainen punainen; leveys: 150px; korkeus: 50px; )

Nyt sivumme selaimessa näyttää tältä:

Muutetaan nyt toisen lohkon sijaintia lisäämällä sääntö tyylisivulle:

#blok1, #blok2, #blok3 (reunus:1px tasainen punainen; leveys:150px; korkeus:50px; ) #blok2(sijainti:suhteellinen; vasen:50px; yläosa:25px; )

Nyt sivumme näyttää tältä:

Toinen lohkomme on siirtynyt alas ja oikealle suhteessa siihen, missä se olisi ollut normaalissa virtauksessa. Loput lohkot jäivät paikoilleen. Käytännössä suhteellista paikannusta käytetään melko harvoin, joten emme kiinnitä siihen enempää huomiota ja harkitsemme kelluvia lohkoja.

Kelluvat lohkot

Näitä lohkoja ei voida sijoittaa pikselitarkkuudella, kuten aikaisemmissa kaavioissa, mutta tämä paikannusmalli on hyvin yleinen. Harvoin web-sivusto selviää ilman kelluvia lohkoja, ja on täysin mahdotonta tehdä "sujuvaa" verkkosivustoa ilman niitä.

Tällaiset lohkot voivat liikkua vapaasti sivulla HTML:ssä, ja ne toimivat samalla tavalla parametrin avulla kohdistaa.

Kelluvat lohkot määritellään ominaisuuden mukaan kellua, joka määrittää, kelluuko lohko ja mihin suuntaan se liikkuu. Vaihtoehtoja on kolme:

• vasemmalle- lohko painetaan vasempaan reunaan, loput elementit virtaavat sen ympärillä oikealla puolella.


• oikein- lohko painetaan oikeaan reunaan, loput elementit virtaavat sen ympärillä vasemmalla puolella.


• ei yhtään- lohko ei liiku ja se on sijoitettu kiinteistön mukaan asema.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on HTML-sivu, jossa on seuraava koodi:

Lohkon sijoittelu

Lohkon 1 teksti

Ja style.css-sivu, jossa on seuraava koodi:

#blok1(reunus:1px tasainen punainen; leveys:150px; korkeus:50px; )

Nyt sivumme selaimessa näyttää tältä:

Laitetaan lohkomme kellumaan ja työnnetään se vasempaan reunaan:

#blok1(reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; kelluva:vasen; )

Työnnetään nyt lohko oikeaan reunaan:

#blok1(reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; kelluva:oikea; )

Nyt sivumme selaimessa näyttää tältä:

Mitä tapahtuu, jos sivulla on useita kelluvia lohkoja? Lisätään toinen lohko html-sivullemme:

Lohkon sijoittelu

Lohkon 1 teksti

Estä teksti 2

Vain joitain elementtejä sivulla. Se voi olla vain tekstiä, linkkejä, luetteloita, kuvia jne.

Ja anna heille erilaiset omaisuusarvot kellua:

#blok1(reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; kelluva:vasen; ) #blok2(reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; kelluvuus:oikea; )

Nyt sivumme selaimessa näyttää tältä:

Entä jos niillä on samat arvot? Esimerkiksi:

#blok1( reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; float:vasen; ) #blok2(reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; float:vasen; )

Sitten toinen lohko painetaan ensimmäisen lohkon oikeaa reunaa vasten:

Tilanne on samanlainen samoilla arvoilla oikein:

#blok1( reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; kelluva:oikea; ) #blok2(reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; kelluvuus:oikea; )

Huomaa: ensin lohko 1 painetaan oikeaan reunaan ja sitten lohko 2 painetaan siihen.

Mutta entä jos haluamme, että lohkot painetaan oikeaan reunaan, mutta sijaitsevat toistensa alapuolella. Tätä varten on kiinteistö selkeä, joka määrittää, mitkä kelluvan kappaleen sivut eivät voi olla muiden kelluvien lohkojen vieressä. Tämä ominaisuus voidaan asettaa johonkin neljästä arvosta:

• vasemmalle- lohkon tulee sijaita kaikkien vasemmanpuoleisten lohkojen alapuolella.


• oikein- lohkon tulee sijaita kaikkien oikeanpuoleisten lohkojen alapuolella.


• molemmat- lohkon tulee sijaita kaikkien kelluvien lohkojen alla.


• ei yhtään- ei ole rajoituksia, tämä on oletusarvo.

Asetetaan tämä ominaisuus toiselle lohkolle viimeisessä esimerkissämme:

#blok1( reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; kelluva:oikea; ) #blok2(reunus: 1px kiinteä punainen; leveys: 150px; korkeus: 50px; kelluva:oikea; selkeä:oikea; )

Nyt siitä tuli sellainen kuin halusin: yksi lohko toisen alla:

Edellisellä oppitunnilla loimme seuraavanlaisen sivun käyttämällä absoluuttista paikannusta:

Katsotaanpa, kuinka se voidaan tehdä kelluvien lohkojen avulla. Joten itse sivun koodi on seuraava:

Lohkon sijoittelu

sivuston otsikko

Sisältö

uutislohko

sivuston alaosassa

Määritetään ensin style.css-sivulla lohkojen mitat ja tausta:

#header( tausta:tumma; leveys:715px; korkeus:100px; ) #menu( tausta:vanha pitsi; leveys:190px; korkeus:300px; ) #content( tausta:vanha pitsi; leveys:525px; korkeus:300px; ) #footer (tausta:tumma; leveys:715px; korkeus:30px; ) #uutiset( tausta:keltainen; leveys:150px; korkeus:280px; )

Nyt lohkomme sijaitsevat normaalissa virtauksessa, ts. yksi toisen alla. Meidän on tehtävä lohkoja valikosta Ja sisältöä kelluva ja vasenkätinen. Block uutiset tulee painaa oikeaa reunaa vasten, ts. Teemme siitä oikeakätisen kelluvan lohkon:

#header( tausta:tumma; leveys:715px; korkeus:100px; ) #menu(tausta:vanha pitsi; leveys:190px; korkeus:300px; float:vasen; ) #content( tausta:vanha pitsi; leveys:525px; korkeus:300px ; kellua:vasen

Sivumme selaimessa näyttää tältä:

Katsotaanpa uutislohkoamme, näet, että se sijaitsee lohkon tekstin alla sisältöä. Mutta halusimme uutislohkon olevan oikealla ja tekstin kiertävän sen ympärillä vasemmalla.

Miksi se ei toiminut meille? Koska meidän lohkomme uutiset html-koodissa sijaitsee tekstin alla ja vain sen alapuolella oleva teksti virtaa sen ympäri. Tämän korjaamiseksi meidän on asetettava oma div="uutiset" tekstin yläpuolella (eli ennen sanaa "sisältö"):

Lohkon sijoittelu

sivuston otsikko

uutislohko

Sisältö

sivuston alaosassa

Nyt uutislohkomme on paikallaan:

Ja jotta se ei paina lähelle ylä- ja oikeaa reunaa, lisäämme tälle lohkolle marginaaliarvon:

#uutiset( tausta:keltainen; leveys:150px; korkeus:280px; float:oikea; marginaali:10px; )

Nyt olemme saavuttaneet saman tuloksen kuin absoluuttisella sijoittelulla.

Ymmärrä, että kelluvien lohkojen avulla on helpompi asetella sivu: sinun ei tarvitse laskea pikseleitä ja koodi on lyhyempi. Lisäksi "fluid"-asettelulla emme voi määrittää lohkon tarkkaa sijaintia näytöllä, ja kelluvien lohkojen avulla emme tarvitse tätä, riittää, että ilmaisemme vain maamerkin (vasemmalla, oikealla, alapuolella tai samalla rivillä).

Kiinteät lohkot

Kuten muistat, kiinteässä sijoittelussa lohko on kiinteä suhteessa katselualueeseen. Joillakin tavoilla kiinteät lohkot ovat samanlaisia ​​kuin kehyksiä. Vieritys on käytettävissä vain kehyksen sisällä, mutta ei lohkon sisällä.

Kiinteillä lohkoilla on yksi merkittävä haittapuoli: Internet Explorer -selaimet eivät tue niitä. Siksi niitä ei pidä käyttää toistaiseksi. Siksi tässä ilmoitamme vain tällaisen säännön syntaksin, jos haluat kokeilla sitä itse (esimerkiksi Opera-selaimessa).

#blok( position:fixed; left:0px; top:0px; )

Lohko, jonka tunniste on "blok", pysyy paikallaan sivua vieritettäessä.

Siinä kaikki tälle päivälle. Seuraavalla oppitunnilla tutustumme muihin lohkojen ominaisuuksiin ja niiden tyyppeihin.

Ne toimivat kaikkien sijoitettujen elementtien kanssa paitsi staattisten elementtien kanssa.

Sijoitusesimerkki.

Elementit voivat mennä päällekkäin!

Näytetään elementti muiden yläpuolella!

Sijaintiominaisuudella on 4 arvoa: staattinen, kiinteä, suhteellinen ja absoluuttinen. Jokainen näistä merkityksistä esitellään alla käyttöesimerkillä.

Ennen kuin tarkastelemme yksityiskohtaisesti kaikentyyppisiä elementtien sijoittelua sivulla, meidän on pohdittava, mikä asiakirjavirta on.

Asiakirjan kulku

Oletusarvoisesti verkkosivun elementit näytetään siinä järjestyksessä, jossa ne näkyvät HTML-dokumentissa, eli lohkoelementit täyttävät niille käytettävissä olevan leveyden ja pinotaan pystysuunnassa päällekkäin. Rivielementit asetetaan vaakasuoraan riviin, kunnes koko käytettävissä oleva leveys on varattu, kun koko leveys on varattu, tehdään rivinvaihto ja kaikki alkaa alusta. Tätä elementtien järjestelyä kutsutaan normaali virtaus(kutsutaan myös asiakirjavirtaa tai yleinen virtaus).

Voit käyttää float- tai position-ominaisuutta poistaaksesi elementin normaalista virtauksesta. Jos elementti "putoaa" normaalista virtauksesta, elementit, jotka sijaitsevat kyseisen elementin alla olevassa koodissa, siirtyvät paikoilleen verkkosivulla.

Staattinen paikannus

Staattinen on web-sivun kaikkien elementtien oletussijainti. Jos et käytä sijaintiominaisuutta elementtiin, se on staattinen ja näkyy verkkosivulla elementtien yleisen kulun mukaisesti.

Kun käytät CSS-ominaisuuksia ylä, vasen, oikea tai alhaalla staattisesti sijoitettuun elementtiin, ne ohitetaan.

Tarvittaessa voit asettaa tyylisivun staattisen paikantamisen käyttämällä staattista arvoa:

Ensimmäinen kappale.

Toinen kappale.

Kokeile »

Kiinteä asento

Kiinteästi sijoitetut elementit sijaitsevat sivulla suhteessa selainikkunaan. Tällaiset elementit poistetaan yleisestä virtauksesta. Vuon kiinteää elementtiä seuraavat elementit ohittavat sen siirtyen ja ottavat paikkansa verkkosivulla.

On syytä kiinnittää huomiota siihen, että kiinteästi sijoitetut elementit voivat olla päällekkäin muiden elementtien kanssa piilottaen ne kokonaan tai osittain. Kun selaat pitkiä sivuja, ne luovat vaikutelman, että liikkumattomat esineet jäävät samaan paikkaan:

Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti

Kokeile »

Suhteellinen sijoittelu

Suhteellisesti sijoitetut elementit, kuten staattiset elementit, pysyvät yleisessä virtauksessa. Kun käytät ylä-, vasen-, oikea- tai ala-ominaisuuksia suhteellisesti sijoitettuihin elementteihin, ne liikkuvat suhteessa sijaintiinsa jättäen tyhjää tilaa elementin alun perin sijainneille.

Tällaiset elementit eivät vaikuta niitä ympäröivien elementtien asentoon, muut elementit pysyvät paikoillaan ja ne voivat olla päällekkäin suhteellisen sijoitetulla elementillä:

Ensimmäisen tason otsikko.

Suhteellisen sijoitettu otsikko.

Kolmannen tason otsikko.

Kokeile »

Huomautus: Elementtejä, joilla on suhteellinen sijainti (suhteellinen), käytetään yleensä ylätason elementeille, joilla on absoluuttinen sijainti (absoluuttinen).

Absoluuttinen asemointi

Absoluuttisesti sijoitetut elementit poistetaan kokonaan kokonaisvirrasta, loput elementit vievät vapaan tilan jättäen täysin huomioimatta täysin sijoitetut elementit. Tämän jälkeen voit sijoittaa elementin haluamaasi paikkaan verkkosivulla käyttämällä ylä-, vasen-, oikea- tai alakohtaisia ​​ominaisuuksia.

Kaikki absoluuttisesti sijoitetut elementit sijoitetaan suhteessa selainikkunaan tai suhteessa lähimpään sijoitettuun esi-isään (jos sellainen on), jonka sijaintiominaisuus on absoluuttinen , kiinteä tai suhteellinen .

Muutetaan logon paikkaa käyttämällä absoluuttista sijoittelua.
Logo tulee nyt sivun oikeaan yläkulmaan.

Kokeile »

Päällekkäiset elementit

Kun elementit ovat sivun kokonaisvirran ulkopuolella, ne voivat mennä päällekkäin. Tyypillisesti elementtien järjestys vastaa niiden järjestystä sivun HTML-koodissa, mutta päällekkäisyyden järjestystä on mahdollista ohjata CSS-ominaisuuden z-index avulla, mitä suurempi sen arvo, sitä korkeampi elementti on.