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. Kukin näistä merkityksistä esitetään alla esimerkin avulla.
Ennen kuin tarkastelemme yksityiskohtaisesti kaikentyyppisiä elementtien sijoittamista sivulle, 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 asiakirjavirta 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ä elementtiin sijaintiominaisuutta, se on staattinen ja näkyy verkkosivulla elementtien yleisen kulun mukaisesti.
klo CSS:n avulla ominaisuudet top , left , right tai bottom staattisesti sijoitettuun elementtiin, ne ohitetaan.
Tarvittaessa voit asettaa tyylisivun staattisen paikantamisen käyttämällä staattista arvoa:
Asiakirjan nimi
Ensimmäinen kappale.
Toinen kappale.
Yrittää "
Kiinteä asento
Kiinteästi sijoitetut elementit sijaitsevat sivulla suhteessa selainikkunaan. Tällaiset elementit poistetaan kokonaisvirrasta. 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. Rullattaessa pitkiä sivuja, ne luovat vaikutelman liikkumattomista kohteista, jotka pysyvät samassa paikassa:
Asiakirjan nimi
Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti Teksti
Yrittää "
Suhteellinen sijoittelu
Elementit suhteellisella sijoittelulla, kuten staattisia elementtejä, 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ä:
Asiakirjan nimi
Ensimmäisen tason otsikko.
Suhteellisen sijoitettu otsikko.
Kolmannen tason otsikko.
Yrittää "
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. Voit sitten sijoittaa elementin mihin tahansa Oikea paikka Web-sivuja käyttämällä ylä-, vasen-, oikea- tai alhaisia 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 .
Asiakirjan nimi
Muutetaan logon paikkaa käyttämällä absoluuttista sijoittelua. Logo tulee nyt sivun oikeaan yläkulmaan.
Yrittää "
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.
Asiakirjan nimi
z-indeksi: 1;
z-indeksi: 0;
z-indeksi: 2;
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ää olevan 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 nosturia 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 lohkon 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ää aidanpylvä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 se kestää kauemmin ja vaatii myös paljon vaivaa - koko ajan täytyy juosta ympäriinsä koukuttaen vinssiä seuraavaan tolppaan.
P.P.S. Selitin niin hyvin kuin pystyin - anteeksi.
Sivun asettelussa käytetään usein kahta päätyökalua - paikannus Ja vapaa liikkuvuus (kelluva). CSS-asemoinnin avulla voit määrittää, missä elementin laatikko näkyy, ja vapaa kelluminen siirtää elementtejä säilölaatikon vasempaan tai oikeaan reunaan, jolloin muun sisällön "virrata" sen ympärillä.
Elementtien sijoittaminen ja vapaa liikkuvuus
1. Sijoitustyypit
Sijainti-ominaisuuden avulla voit määrittää lohkon uuden sijainnin suhteessa siihen, missä se olisi asiakirjan normaalissa kulmassa. Oletusarvoisesti kaikki elementit järjestetään peräkkäin peräkkäin siinä järjestyksessä, jossa ne on määritelty HTML-dokumentin rakenteessa. Omaisuutta ei ole peritty.
asema
Merkitys:
staattinen
Oletusarvo tarkoittaa, ettei paikannusta. Elementit näytetään peräkkäin peräkkäin siinä järjestyksessä, jossa ne on määritelty HTML-dokumentissa. Käytetään minkä tahansa muun paikannusarvon tyhjentämiseen.
suhteellinen
Suhteellisesti sijoitettua elementtiä siirretään normaalipaikastaan eri suuntiin suhteessa emokonäinsä rajoihin, mutta sen käyttämä tila ei katoa. Tällainen elementti voi kuitenkin olla päällekkäinen sivun muun sisällön kanssa.
Jos suhteellisesti sijoitetulle elementille asetat ominaisuudet ylhäältä ja alhaalta tai vasemmalle ja oikealle samanaikaisesti, niin ensimmäisessä tapauksessa vain yläosa toimii, toisessa - vasen.
Suhteellisen sijoituksen avulla voit asettaa elementille z-indeksin sekä sijoittaa alielementit ehdottomasti lohkoon.
ehdoton
Absoluuttisesti sijoitettu elementti poistetaan kokonaan asiakirjavirrasta ja sijoitetaan suhteessa sen säiliölohkon (toisen elementin tai selainikkunan) rajoihin. Absoluuttisesti sijoitetun elementin säiliölohko on lähin esi-isäelementti, jonka sijaintiominaisuuden arvo ei ole staattinen.
Elementin reunojen sijainti määritetään offset-ominaisuuksien avulla. Tällaisen elementin käyttämä tila kutistuu ikään kuin elementtiä ei olisi sivulla. Absoluuttisesti sijoitettu elementti voi mennä päällekkäin tai olla muiden elementtien päällä (z-indeksiominaisuuden vuoksi). Mikä tahansa absoluuttisesti sijoitettu elementti generoi lohkon, eli se ottaa arvonäytön: block; .
korjattu
Korjaa elementin tiettyyn kohtaan sivulla. Kiinteän elementin säilölohko on näkymä, eli elementti on aina kiinteä suhteessa selainikkunaan eikä muuta sijaintiaan sivua vierittäessä. Itse elementti poistetaan kokonaan pääasiakirjakulusta ja luodaan uuteen asiakirjavirtaan.
alkukirjain
Asettaa ominaisuuden arvon oletusarvoon.
periä
Perii ominaisuuden arvon emoelementiltä.
Riisi. 1. Ero staattisen, suhteellisen ja absoluuttisen paikantamisen välillä
2. Offset-ominaisuudet
Ominaisuudet kuvaavat siirtymää suhteessa säiliölohkon lähimpään sivuun. Aseta elementeille, joiden sijaintiominaisuuden arvo ei ole staattinen. Ne voivat ottaa sekä positiivisia että negatiivisia arvoja. Ei peritty.
Ylimmän ominaisuuden kohdalla positiiviset arvot siirtävät alle sijoitetun elementin yläreunaa ja negatiiviset arvot siirtävät sen säiliölohkon yläreunaa. Vasemman ominaisuuden kohdalla positiiviset arvot siirtävät sijoitetun elementin reunaa oikealle ja negatiiviset arvot siirtävät sijoitetun elementin reunaa vasemmalle. Eli positiiviset arvot siirtävät elementin säiliölohkon sisällä ja negatiiviset arvot sen ulkopuolelle.
3. Sijoittaminen elementin sisällä
Absoluuttisesti sijoitetun elementin konttilohkolle ominaisuus position: suhteellisen asetetaan ilman siirtymiä. Tämä mahdollistaa elementtien sijoittamisen säiliöelementtiin.
1. Jos absoluuttisesti sijoitetun elementin leveys tai korkeus on asetettu arvoon auto , sen arvo määräytyy elementin sisällön leveyden tai korkeuden mukaan. Jos leveys tai korkeus on ilmoitettu erikseen, tämä on arvo, joka annetaan. 2. Jos lohkon sisällä, jossa on sijainti: absoluuttinen, on elementtejä joille kelluva kääre, silloin tämän elementin korkeus on yhtä suuri kuin näistä elementeistä korkeimman korkeus. 3. Elementille, jonka sijainti: absoluuttinen tai sijainti: kiinteä, float-ominaisuutta ei voi asettaa samanaikaisesti, mutta elementille, jonka sijainti on: suhteellinen, voit. 4. Jos sijoitetun elementin esi-isä on lohkoelementti, niin lohkosäiliön muodostaa reunuksen rajoittama sisältöalue. Jos esi-isä on rivielementti, säiliölohko muodostuu sen sisällön ulkorajasta. Jos esi-isä ei ole, säiliölohko on runko-elementti.
5. Elementtien vapaa liikkuvuus
Normaalissa järjestyksessä lohkoelementit renderöidään alkaen selainikkunan yläreunasta alareunaa kohti. Float-ominaisuuden avulla voit siirtää mitä tahansa elementtiä tasaamalla sen verkkosivun tai sen sisältävän säiliöelementin vasempaan tai oikeaan reunaan. Tässä tapauksessa muut lohkoelementit jättävät sen huomioimatta ja rivielementit liikkuvat oikealle tai vasemmalle vapauttaen sille tilaa ja virtaavat sen ympäri.
Riisi. 3. Elementtien vapaa liikkuvuus
Kelluva lohko saa sisältönsä mitat huomioiden pehmusteet ja reunat. Kelluvien elementtien ylä- ja alamarginaalit eivät kutistu. Float-ominaisuus koskee sekä lohkoelementtejä että rivielementtejä.
Siirretyn elementin vasen tai oikea ulkoreuna, toisin kuin sijoitetut elementit, ei voi sijaita sen säiliölohkon sisäreunan vasemmalla (tai oikealla) ts. mennä sen rajojen ulkopuolelle. Lisäksi, jos sisäinen pehmuste on määritetty säiliölohkolle, kelluva lohko on erillään säiliölohkon reunasta määritetyllä etäisyydellä.
Ominaisuus muuttaa automaattisesti näyttöominaisuuden lasketun (selaimen näyttämän) arvon display: block seuraaville arvoille: inline , inline-block , table-row , table-row-group , table-column , table-column-group , taulukko-solu taulukon otsikko, taulukon otsikkoryhmä, taulukon alatunnisteryhmä. Sisäisen taulukon arvo muuttuu taulukoksi .
Ominaisuus ei vaikuta elementteihin, joissa on näyttö: flex ja display: inline-flex .
Käytettäessä float-ominaisuutta lohkon elementtejä Muista asettaa leveys. Tämä luo tilaa muulle sisällölle selaimessa. Mutta jos kaikkien sarakkeiden yhteinen leveys on suurempi kuin käytettävissä oleva tila, niin viimeinen elementti menee alas.
Jossa pystyreunat Kelluvien elementtien marginaalit eivät kutistu viereisten elementtien marginaalien kanssa, toisin kuin tavalliset lohkoelementit.
6. Peruuta virtaus elementtien ympärillä
6.1. selkeä omaisuus
Clear-ominaisuus määrittää, kuinka kelluvaa elementtiä seuraava elementti sijoitetaan. Ominaisuus peruuttaa float-ominaisuuden määrittämän elementin toisella tai molemmilla puolilla. Voit estää taustan tai reunusten näyttämisen kelluvien elementtien alla käyttämällä (ylivuoto: piilotettu;) -sääntöä.
6.2. Virran puhdistaminen tyyleillä käyttämällä clearfix-luokkaa ja :after pseudo-luokkaa
Oletetaan, että sinulla on lohkosäiliö, jonka leveyttä ja korkeutta ei ole määritetty. Sen sisään asetetaan kelluva lohko, jolla on määritellyt mitat.
Kelluvia elementtejä sisältävän elementin virtauksen puhdistamiseen on toinenkin temppu, kuten vaakasuuntainen luettelomerkkiluettelo:
Ul ( marginaali: 0; listatyyli: ei mitään; täyttö: 20px; tausta: #e7e6d4; ylivuoto: auto; ) li ( float: vasen; leveys: calc(100% / 3 - 20px); korkeus: 50px; marginaali- oikea: 20px tausta: 3px katkoviiva #666666 6. Vaakasuuntaisen listavirran puhdistaminen
SISÄÄN HTML-kieli Kaikki elementit voidaan jakaa lohkoon ja riviin. Lohkoelementit esitetään yleensä suorakaiteen muotoisina alueina, joissa on jonkin verran tietoa. Heidän avullaan rakennetaan sivuruudukko. Tällaiset elementit vievät leveydeltään kaiken käytettävissä olevan tilan, ja yleensä ennen ja jälkeen on rivinvaihto. Lohkoille voidaan antaa sisennyksiä, vaaka- ja pystysuuntaiset mitat.
Riisi. 1. Ero staattisen, suhteellisen ja absoluuttisen paikantamisen välillä 
Riisi. 2. Absoluuttinen suhteellinen sijainti
Riisi. 4. Säiliölohkon "kutistusvaikutus".
Riisi. 5. "Puhdistus"-menetelmän soveltaminen kelluvan elementin sisältävään säiliölohkoon