Sijainti (absoluuttinen, suhteellinen ja kiinteä) - tapoja sijoittaa HTML-elementtejä CSS:ssä (säännöt vasemmalle, oikealle, ylhäältä ja alhaalta). CSS - Positioning Block Elements

Hei rakkaat blogisivuston lukijat. Tänään puhumme periaatteista HTML-elementtien sijoittaminen CSS:n avulla Paikkasäännöt (absoluuttiset, suhteelliset ja kiinteät arvot) ja ominaisuudet, jotka määrittävät vasemman, oikean, ylä- ja alasiirtymän. Näetkö tähden vasemmassa alakulmassa? Kun olet lukenut artikkelin loppuun, saat selville, kuinka se pääsi sinne.

Edellisessä artikkelissa puhuimme yhdestä perustavanlaatuisesta, joka auttaa katkaisemaan HTML-koodissa toisiaan seuraavien tunnisteiden normaalin virran. Sen avulla voit toteuttaa, johon rakennus nyt pääasiassa perustuu. Mutta ei Float yksin...

Suhteellinen sijainti - suhteellinen sijainti

Mukana on myös Position, joka vastaa tunnisteiden sijoittamisesta peräkkäisten tyylisivujen avulla ja sallii myös katkaista normaali virtaus. Ymmärryksessä tämä sääntö on hieman monimutkaisempi kuin aiemmin käsitelty float, mutta uskon, että voimme käsitellä sen.

Sillä on neljä mahdollista arvoa (staattinen | suhteellinen | absoluuttinen | kiinteä). Kuinka voimme tietää tämän? No, tietysti virallisella verkkosivustolla julkaistusta eritelmästä:

Oletusarvo on asento: staattinen. Nuo. normaalissa kulussa kahdella CSS-säännöllä, jotka voivat rikkoa sen, on oletusarvot staattinen ja float:none. Heti kun jokin näistä arvoista muuttuu, normaali HTML-koodin kulku tässä paikassa häiriintyy, koska nyt tämä tagi voi olla vuorovaikutuksessa naapuriensa kanssa täysin eri tavalla tai jopa olla vuorovaikutuksessa ollenkaan.

Aloitetaan suhteellisella sijoittelulla, joka vastaa arvoa asema: suhteellinen. Kun olemme rekisteröineet sen tunnisteeseen, meillä on mahdollisuus asettaa siirtymä (sijainti) tälle elementille käyttämällä lisätoimintoa säännöt Vasen, oikea, ylhäältä ja alhaalta(vasen, oikea, ylös ja alas, vastaavasti):

Kaikkien neljän oletusarvo on Auto. Kun määritämme tunnisteen sijainti: suhteellinen sääntö, sisennysarvot kaikilta puolilta nollataan ja sinulle annetaan mahdollisuus asettaa ne itse.

Pitää ymmärtää kuinka sisennykset asetetaan. Esimerkiksi vasen: 400px tarkoittaa sisennystä vasemmalta oikealle vastaavalla määrällä ja ylhäältä: 100px tarkoittaa ylhäältä alaspäin. Jos määrität negatiiviset arvot Vasemmalle, Oikealle, Ylhäällä ja Alhaalle, elementti liikkuu vastakkaiseen suuntaan (esimerkiksi ylhäältä on ylhäällä ja Vasen on vasemmalle).

Katsotaanpa suhteellista käyttöä kelluvassa elementissä. Meillä on kaksi Div-säiliötä, jotka sävytämme selvyyden vuoksi eri taustaväreillä käyttämällä .

Ensin saamme ensimmäisen kontin kellumaan vasemmalle käyttämällä vastaavaa ominaisuutta, ja siitä lähtien se on tyhjä, annamme sen (ja sisennyksen marginaalilla):

Tuloksena saamme jotain tämän öljymaalauksen kaltaista:

Ensimmäinen kontti kelluu odotetusti vasemmalle. Samanaikaisesti toinen lohko itse ei näytä huomaavan tätä (koska se), mutta se huomaa kelluvan lohkomme ympärillä virtaavan tekstielementin.

Lisätään nyt sijainti: suhteessa ensimmäisen säilön CSS-sääntöihin ja aseta vasen ja ylempi täyte käyttämällä Vasen ja ylhäältä:

Tämän seurauksena näemme, että kelluva elementtimme on liikkunut määritettyjen marginaalien mukaan:

Huomaa, että teksti virtaa edelleen sen ympärillä ikään kuin se seisoisi edelleen paikallaan. Nuo. Monia HTML-tageja rakentaessaan he ajattelevat, että ne ovat oikeilla paikoillaan (ottamatta huomioon säännöissä asetettuja vasen- ja ylävuoroja).

Mutta kaikki tunnisteet eivät tee tätä, muuten emme näe muutoksia. Lähin esi-isä rullauksella(meidän tapauksessamme tämä on HTML-tunniste, eli itse asiassa katselualue) nämä muutokset havaitaan.

Suhteellisen toimintaperiaate ei ole monimutkainen, mutta ei ole täysin selvää, miksi sitä voidaan käyttää käytännössä. Itse asiassa tätä sääntöä käytetään yhdessä absoluuttisen sijainnin kanssa, ja tässä muodossa se löytää erittäin laajan sovelluksen. Mutta ensin asiat ensin.

Position absoluuttinen - absoluuttinen paikannus CSS:ssä

Siirrytään tarkastelemaan absoluuttista sijoittelua. Helpoin tapa aloittaa tämän CSS-säännön tarkastelu on havainnollistava esimerkki. Oletetaan, että Div-säilön sisällä on sisäinen Span-tagi, jolle asetamme absoluuttisen sijainnin.

Mutta ensin tarkastellaan tätä rakennetta lisäämättä "sijainti: absoluuttinen". Samanaikaisesti lisäämme Spanin rivin korostamiseksi siihen korkeuden, jota ei kuitenkaan käytetä, ja tällä kertaa lisäämme CSS-koodin muutokseksi, ei Head-rakenteen kautta:

Divissa määritimme myös vasemman marginaalin 100 pikseliksi. No, katsotaan nyt, mikä muuttuu, jos annamme Span-viivatunnisteelle absoluuttisen sijainnin lisäämällä CSS-paikan absoluuttiset säännöt:

#abs span( tausta:#C0FFC0; korkeus:100px; sijainti:absoluuttinen; )>

Jotain outoa tapahtui. Sen perusteella, että ominaisuus height:100px käytettiin Spanille, se on lakannut olemasta upotettu tunniste. Sitten ilmeisesti fragmentit "ensimmäinen" ja "kolmas" liittyivät toisiinsa, ikään kuin elementtiä sanalla "toinen" ei enää olisi niiden välillä. Juuri näin absoluuttinen paikannus toimii CSS:ssä.

Mutta katsotaanpa kaikkea kohta kohdalta, kun asetetaan ominaisuus elementille "sijainti: ehdoton":

1. Tunniste, jolle tämä sääntö on määritetty, muuttuu lohkotunnisteeksi
2. Tämän lohkon mitat määräytyvät sen sisältämän sisällön mukaan (ellet määritä niitä erikseen käyttämällä leveyttä ja korkeutta).

Aivan kuten kelluville elementeille (jos Float on määritetty), jos "position: absoluuttinen" käytetään tunnisteeseen, marginaali-colloapse-tehoste ei tule näkyviin tällaisille tunnisteille. Nuo. Kukaan ei voi siirtää pystysisennyksiään hänelle, eikä hän myöskään voi siirtää niitä kenellekään (hän ​​ei jaa pystysisennyksiä kenenkään kanssa).

Jos muistat edellisen artikkelin ""-osiosta, näet, että kaikkia näitä kolmea kohtaa havaittiin luotaessa kelluvia elementtejä Floatilla.

Siksi, jos Float oli jo asetettu tunnisteelle, mutta sille määritettiin "position: absoluuttinen", selain palauttaa ensimmäisen (se on vastuussa koodin jäsentämisestä) arvoon None (oletusarvo), koska ei ole mitään järkeä toteuttaa kahta identtistä mallia.

3. Tunniste, jossa on "position: absoluuttinen", ei ole vuorovaikutuksessa minkään muun HTML-koodielementin kanssa, paitsi sen lähimmän vierivän ylätason. Kaikki muut koodin tagit eivät yksinkertaisesti huomaa elementtiä, jolla on absoluuttinen sijainti (ja tämä näkyy esimerkistämme)

Tämä kaikki on hyvä, mutta "absoluutin" avulla meidän on suoritettava absoluuttinen paikannus. No itse asiassa tämä on itse asiassa totta. Yhdessä sen kanssa voimme käyttää samoja neljää CSS-sääntöä: vasen, oikea, ylä- ja alaosa. Kuinka ne toimivat absoluuttisen paikantamisen kanssa?

Ne asettavat edelleen siirtymän, mutta siirtymä ei ole enää suhteessa elementin nykyiseen sijaintiin, vaan suhteessa sen säilön rajoihin.

Ja itse konsepti säiliö täysin sijoitetuille elementeille poikkeaa yleisesti hyväksytystä. Aiemmista artikkeleista saatat muistaa, että HTML-tunnisteen säilö on katseluportti ja kaikille muille säilö on pääsisältöalue. Tämä ei päde tagille, jonka sijainti on määritetty absoluuttisesti.

Absoluuttisella paikannuksella voimme määrittää kontin itse (se on ensimmäinen esivanhemmista, jolla on aseman arvo on eri kuin staattinen, käytetään oletuksena).

Oletetaan, että jos asetimme vain absoluuttisen sijainnin, mutta emme määrittäneet arvoja vasemmalle, oikealle, ylä- ja alasääntöille, niille käytetään oletusarvoista Automaattista arvoa ja tällainen elementti jää paikalleen (kuten viimeinen kuvakaappaus). Kaikki pitäisi olla selvää tässä.

CSS käyttää esi-isä-lapsi -rakennetta, josta kirjoitin jo yksityiskohtaisesti artikkelissa . Tehtävämme määritellessään säilöä absoluuttiselle sijoitetulle tunnisteelle on löytää esi-isä, jolla on jokin muu arvo kuin staattinen (eli kun se oli nimenomaisesti määritelty).

Esimerkissämme emme osoittaneet sijaintia millekään Span-tunnisteen esivanhemmille, joten kun saavutamme huipulle (HTML-tunnisteen), pysähdymme siihen. Asetetaan nolla täyttö yllä käsitellylle esimerkille ja varmistetaan, että olemme oikeassa:

#abs span( tausta:#C0FFC0; korkeus:100px; sijainti:absoluuttinen; vasen:0; ylhäällä:0; )>

Tämän seurauksena absoluuttisesti sijoitettu tunniste painettiin katseluportin nollareferenssipistettä vasten. Mutta olemme itse vapaita valitse säilö elementille, jolla on määritetty absoluuttinen sijainti. Miten tämä voidaan tehdä?

Absoluuttisen ja suhteellisen sijainnin yhdistelmä Div-asettelussa

No, miksi et käyttäisi tähän CSS-sääntöä "position: suhteellinen". Kirjoitamme sen vaadittuun esi-tagiin (josta tulee lopulta säilö absoluuttisesti sijoitetulle elementille), emmekä kirjoita arvoja Vasen, oikea, ylhäältä tai alhaalta, joten itse asiassa emme tee mitään muutoksia tämän esi-isän asemaan (se pysyy normaalissa säikeessä), mutta määrittämällä sen kontti ja raportin alku ehdottomaan sijoituksemme vuoksi.

Jos kirjoitamme Body-tunnisteeseen "relative", kuvamme muuttuu hieman:

Näet, tyypillisiä sisennyksiä on ilmestynyt, mikä osoittaa, että Body-tunnisteen vasen yläkulma on nyt otettu aloituspisteeksi. Muista, että tämän tunnisteen oletusarvot määrittävät 8 pikselin marginaalin, minkä näemme:

Kirjoitetaan nyt jo tehtyjen lisäksi "position: suhteellinen" Div-säilöön, jonka sisällä Span-tunniste asuu:

Kuten näemme, kuva on muuttunut. Huolimatta siitä, että sekä Body- että Div-kohdalle on määritetty relatiivisuus, Divista tuli ehdottomasti sijoitetun Spanin kontti, koska hän on ensimmäinen esi-isä, jonka sijaintiarvo on muu kuin staattinen.

Lisäksi, jos kirjoitamme myös Divillemme, näemme, että sisältöaluetta, jossa on olemassa oleva sisäinen pehmuste, käytetään säilönä absoluuttiseen paikannukseen:

#abs( tausta:#FFC0C0; marginaali vasen: 100px; sijainti: suhteellinen; reunus:12px katkoviiva #ccf; täyte:20px; )

Kuten esimerkistä voidaan nähdä, vertailupiste sijaitsee vasemmassa yläkulmassa elementtikehyksen sisällä (sen sisäreunaa pitkin). Tästä seuraa sääntö, että tunnisteille, joissa on "position: suhteellinen" (jotka ovat säilöjä, joissa on absoluuttinen sijoittelu), olisi parempi olla käyttämättä kehystä ollenkaan ylilyöntien välttämiseksi.

Sisennykset (offset) Vasen, oikea, ylhäältä ja alhaalta voidaan asettaa absoluuttisten yksiköiden lisäksi (lue lisää ), vaan myös prosentteina, jotka otetaan ruudun leveydestä (vasen ja oikea) ja korkeudesta (ylhäältä ja alhaalta). tuloksena oleva säiliö. Nuo. "top:100%" vastaa 100% säilön korkeudesta ja "vasen:100%" vastaa 100% sen leveydestä.

Ja juuri edellä kuvattu vuorovaikutus minulla oli mielessäni puhuessani absoluuttisen ja suhteellisen sijainnin yhdistelmä. Tämän ansiosta meillä on mahdollisuus itse valita kontti, eli toisin sanoen absoluuttisen paikantamisen lähtökohta. Miksi tätä linkkiä käytetään käytännössä?

He voivat käyttää tätä periaatetta toteuttaakseen samanlaisen tehtävän kuin esimerkiksi täysikokoisen valokuvan näyttämiseen tarkoitetun ns. Liteboxin.

Nuo. jos tarvitset sivulla muodostavat elementin ulkonäön ja piilottamisen, joka, kun se ilmestyy, ei vaikuta kaikkiin muihin tunnisteisiin (vuorovaikutukseen niiden kanssa). Tässä tapauksessa täysin sijoitetun lohkon ilmestyminen ei aiheuta nykimistä ja koko verkkosivun uudelleenjärjestelyä.

Jos haluat avattavan valikon, tee jotain seuraavanlaista. Kun siirrät hiiren osoittimen (asetettu CSS:ssä ) päävalikon kohdan päälle, näkyviin tulee elementti, joka on sijoitettu absoluuttisesti "absoluuttiseksi" (sisäkkäiset valikkokohdat luotu perusteella). Tämä avattava luettelo näkyy juurivalikon vieressä siitä yksinkertaisesta syystä, että sijainti: suhteellinen on määritetty siinä. Kaikki.

Kiinteä sijainti - napsauta kuvaporttiin

Viimeinen paikannusmenetelmä on "asento: kiinteä". Aiemmin käsitellyt menetelmät on suunniteltu sijoitettavaksi suhteessa mihin tahansa HTML-koodielementtiin. Mutta jos alamme vierittää sivua, sen tunnisteet (jopa ne, joilla on absoluuttinen tai suhteellinen sijainti) liikkuvat ylös (tai alas).

Mutta kun käytetään kiinteää, tätä ei enää tapahdu. Tällä tavalla sijoitettu elementti on aina samassa paikassa katseluportissa web-sivun vierityksestä riippumatta. Olet todennäköisesti jo törmännyt tällaisiin vaihtoehtoihin verkkosivustoilla. Esimerkiksi melko suosittu WordPressin laajennus nimeltä .

Tunnisteelle, jolla on määritetty position:fixed, kukaan ei etsi säilöä, koska se on itse näkymä. Tämä on juuri ero "absoluuttisesta", ja kaikki muu on sama. Kiinteillä sijoitteluilla varustetut lohkot käyttäytyvät vierittäessäsi sivua ikään kuin ne olisivat selainikkunasi käyttöliittymän elementtejä (ne ovat aina käsillä).

Tällä tavalla toteutetaan esimerkiksi työkalurivit, alasvetopaneelit, joissa on mahdollisuus antaa palautetta, jne. asioita. Esimerkkinä tällä sivulla Asetin asennon: kiinteä pienelle kuvalle näytön vasemmassa alakulmassa (näkymässä):

Siinä kaikki tältä päivältä, seuraavassa artikkelissa puhumme , joka koskee vain jo sijoitettuja koodielementtejä, ts. joille on määritetty joko kiinteä, suhteellinen tai absoluuttinen.

Onnea sinulle! Nähdään pian blogisivuston sivuilla

Voit katsoa lisää videoita siirtymällä osoitteeseen

Saatat olla kiinnostunut

Paikannus käyttämällä Z-indeksiä ja CSS-kohdistimen sääntöä hiiren kursorin vaihtamiseksi
Float and clear CSS - lohkoasettelutyökalut
Luettelotyyli (tyyppi, kuva, sijainti) - Css-säännöt luetteloiden ulkoasun mukauttamiseen HTML-koodissa
Näytä (esto, ei mitään, upotettu) CSS:ssä - aseta HTML-elementtien näyttötyyppi verkkosivulla
Mihin CSS on tarkoitettu, miten peräkkäiset tyylisivut yhdistetään HTML-dokumenttiin ja tämän kielen perussyntaksi

HTML-asettelu on pitkä, huolellinen, mutta erittäin luova prosessi. Huolimatta siitä, että suurimmalle osalle IT-alalla työskentelevistä ihmisistä verkkosivujen asettelu saattaa tuntua tylsältä rutiinilta, tällaiseen tehtävään kutsutut asiantuntijat eivät vain suorita tehtäviä tehokkaasti, vaan saavat myös konkreettista iloa itse prosessista.

Ennen kuin hänestä tulee kokenut taittosuunnittelija, jokainen aloittelija viettää paljon aikaa erilaisten ohjeiden ja määritelmien tutkimiseen sekä HTML-kielelle että sen liittolaiselle CSS:lle. Tänään puhumme siitä, mihin sitä tarvitaan ja mitä "temppuja korvilla" voit tehdä, sekä yhdestä sen suosituista ominaisuuksista - Position Relative.

Mikä on CSS?

CSS-lyhenne voidaan tulkita ja kääntää venäjäksi "kaskadimuotoiseksi tyylisivuksi". Se kuulostaa melko oudolta - toisaalta sanat näyttävät olevan ymmärrettäviä, mutta toisaalta yleistä merkitystä ei heti tajuta. Aloitetaan jostain yksinkertaisesta - tyyleistä. Tämän tekniikan avulla voit antaa sivulla oleville objekteille tiettyjä ulkonäköominaisuuksia, jotka voidaan määrittää vain kerran, mutta joita voidaan käyttää äärettömän monta kertaa.

Virallisen käännöksen sana "taulukot" osoittautui melkein vahingossa - itse asiassa olisi ollut tarkoituksenmukaisempaa käyttää tässä sanaa "sheets" tai "lists", mutta alkuperäisen käännöksen kirjoittajat päättivät, että CSS näytti enemmän kuin taulukko kuin luettelo, ja keitä me olemme nyt tuomitsemaan heidät.

Lopuksi sana "kaskadi". Tosiasia on, että jokaisella elementillä voi olla useita tyylejä kerralla, joita voidaan sekoittaa tai jopa leikata. Tällaisissa tapauksissa selaimen on turvauduttava useisiin sääntöihin muodostaakseen oikein lohkon ulkoasun, jolla sattuu olemaan useita tyylejä, joista yhdellä on esimerkiksi Position Relative -ominaisuus ja toisella - Position Absolute . Todellisuudessa tällaisia ​​konflikteja ei pitäisi sallia, mutta suurissa projekteissa tällaista hämmennystä tapahtuu melko usein.

Joten nyt, kun nimi on selvä, katsotaanpa yksi yksinkertainen esimerkki. Oletetaan, että verkkosivustollasi tulisi olla suuri määrä painikkeita, jotka on suunniteltu tietyllä tavalla. Niillä on ominaisuuksia, kuten koko, varjo, läpinäkyvyys, väri. Voit tietysti määrittää nämä parametrit jokaisen painikkeen luomisen yhteydessä, mutta CSS:n käyttö on paljon helpompaa. Käytännössä sinun on kuvattava tietty luokka, jossa kaikkien edellä mainittujen ominaisuuksien arvot luetellaan, ja sitten pitkän luettelon sijasta jokaisen painikkeen tagissa sinun tarvitsee vain ilmoittaa nimi tämän luokan, minkä jälkeen selain itse maalaa nämä elementit halutuilla väreillä ja antaa niille oikean "kiillon".

Mihin Positio-ominaisuus on tarkoitettu?

Siirrytään nyt suoraan Position-ominaisuuteen, jota varten tämä koko artikkeli aloitettiin. Jos tunnet englannin kielen tai sinulla on hyvä intuitio, sinun pitäisi jo olla selvää, että tämä ominaisuus on vastuussa elementin sijainnista. Itse asiassa näin on, mutta sen sijaan, että määrittäisivät tietyn sijainnin, tämä ominaisuus kertoo selaimelle tarkalleen, kuinka tämä tai toinen elementti tulee sijoittaa suhteessa viereisiin elementteihin tai koko sivuun kokonaisuutena.

Mitä arvoja Position-ominaisuus voi saada?

Kiinteistöllämme voi olla useita eri arvoja, niitä on yhteensä viisi. Tässä lyhyt kuvaus jokaisesta:

• Positio Peri. Tämän ominaisuuden avulla voit kopioida sijaintitiedot pääelementistä. Jos sinulla on esimerkiksi div, jolla on määritetty sijaintisuhde, siihen kirjoitettu IMG periytymisarvon kanssa saa myös Suhteellisen arvon.
• Staattinen sijainti. Tämä arvo määritetään kaikille elementeille automaattisesti, ellei muuta ole määritetty. Elementit sopivat paikoilleen, kuten ne mainitaan koodissa, eivätkä ne ole saatavilla erilaisiin "herkkuihin", joiden avulla voit muuttaa niiden sijaintia.
• Asema Absoluuttinen. Tätä Position-ominaisuuden arvoa käytetään usein tapauksissa, joissa on tarpeen luoda "kelluva" elementti. Tällä ominaisuusarvolla elementti pysyy "näkymättömänä" sivun muille osille. Eli ne on järjestetty ikään kuin absoluuttista elementtiämme ei olisi ollenkaan. Se itse pysyy aina paikallaan riippumatta siitä, kuinka pitkälle sivua on vieritetty.
• Asento kiinteä. Tämä arvo on monella tapaa samanlainen kuin edellinen, mutta vaikka absoluuttinen elementti napsahtaa yläelementtiinsä, kiinteä elementti käyttää vain selainnäytön vasemman yläkulman koordinaatteja ottamatta huomioon muita sitä edeltäviä elementtejä. .
• Lopuksi Suhteellinen sijainti. Tämän tyyppisen arvon avulla voit sijoittaa elementin suhteessa muihin, mikä voi olla hyödyllistä luotaessa mukautuvaa merkintää, jota kutsutaan nimellä "kumi". Tämän ominaisuuden ansiosta elementti "työntää erilleen" muut menettämättä kykyään muuttaa sijaintiaan sivulla.

Ominaisuudet Positionin kanssa työskentelyyn eri selaimissa

Kaikkia selaimia ei ole luotu samanarvoisiksi. Vaikka useimmat vaihtoehtoiset Internet-selausohjelmat käsittelevät Position-arvon täysin oikein ilman ongelmia, "kroonisesti erityinen" Internet Explorer käsittelee tätä ominaisuutta versiostaan ​​riippuen.

Esimerkiksi käyttämällä jo "haudattua" IE6-selainta, et voi käyttää Fixed- ja Herit-arvoja - "aasi" yksinkertaisesti jättää ne huomiotta. Huolimatta siitä, että tilanne alkoi parantua seitsemännen version myötä ja Fixed oli jo käsittelyssä, kaikkien suosikki "muiden selainten lataamiseen tarkoitettu selain" saavutti Inheritin vasta kahdeksannessa inkarnaatiossaan.

Muut selaimet ovat hiljaa prosessoineet Positiota ensimmäisistä versioista lähtien, paitsi Opera, joka sai tuen tälle ominaisuudelle 90-luvun puolivälissä julkaistussa 4. muunnelmassaan.

Työskentely Position kanssa Javascriptissä

Itse asiassa sisällytimme tarinan siitä, kuinka Javascriptin Position-ominaisuutta voi käyttää vain kunnollisuuden vuoksi. Koska tämän ominaisuuden nimessä ei ole erikoismerkkejä, voit käyttää JS:ää ilman muutoksia, esimerkiksi asettaaksesi div Position arvoon Suhteellinen, lisää seuraava rivi: div.style.position = 'suhteellinen'.

Kuten näet, kaikki on melko yksinkertaista.

Miksi asemasuhteellinen ansaitsee erityistä huomiota?

Vaikka suurin osa Position-ominaisuuden arvoista lievästi sanottuna "sylkee" ympäröiviin elementteihin käyttämällä "tyyliasento: suhteellinen" -arvoa, kannattaa aina muistaa koko sivu kokonaisuudessaan, koska sen virheellinen käyttö voi suuresti " vino" koko näytön sisältöä .

Lisäksi vain tämän ominaisuuden avulla voit helposti muuttaa kiinteän ulkoasun responsiiviseksi, koska sen käyttö vaikuttaa automaattisesti koko sivun sisältöön. Myöhemmin meillä on aikaa tarkastella esimerkkejä ja virheitä tämän arvon käytössä, ja voit vakuuttua sen konkreettisesta merkityksestä käytännössä.

Milloin suhteellista paikannusta tulisi käyttää?

Tavallisten sivujen asettelun lisäksi Relative-toimintoa käytetään usein erilaisten mielenkiintoisten tehosteiden luomiseen. Jos esimerkiksi haluat jonkin elementin "saapuvan" sivulle tai päinvastoin, siirtyvän sujuvasti sen reunojen ulkopuolelle, tämä ominaisuus voi auttaa sinua toteuttamaan tämän "harhaan".

Tällaiset "temput" toteutetaan Javascriptin kautta tai, jos pyrit progressiiviseen asetteluun, CSS3-ominaisuuksien avulla, joiden avulla voit määrittää tietyn muuttujan arvon syklisen muutoksen.

Lisäksi joissakin tapauksissa on mahdollista luoda "hybridi" Position Relative -arvoja. Vaikka CSS ei salli sinun asettaa samanaikaisesti jotain sijaintia: absoluuttinen suhteellinen, voit silti saavuttaa tämän vaikutuksen käyttämällä joitain temppuja. Tämä lähestymistapa voi olla hyödyllinen tapauksissa, joissa sinun on luotava jotain, kuten monimutkainen tai kontekstivalikko. Esimerkkejä ajatellen annamme ehdottomasti kuvauksen tällaisen "hybridin" rakenteesta.

Esimerkkejä suhteellisen paikantamisen käytöstä

Position Relative on melko yksinkertainen mutta joustava työkalu, jonka avulla voit toteuttaa monia mielenkiintoisia tehosteita. Jotta et tuhlaa aikaa ja tilaa turhien yleiskoodien kirjoittamiseen, esittelemme useita verbaalisia algoritmeja, jotka voivat koristella verkkosivustoasi tai sen yksittäisiä sivuja.

Aloitetaan "loppuun" -rivillä. Oletetaan, että tarvitset elementin, joka "ponnahtaa ulos" näytön vasemmasta reunasta ja siirtyy vähitellen oikealle puolelle. Tällaisen "mekanismin" toteuttamiseksi sinun tulee asettaa sijainti: suhteellinen; vasemmalla: -100px, jossa -100 on likimääräinen pikselien määrä, jotka muodostavat lohkon leveyden. Tämän tyylin avulla voit piilottaa lohkon näytöltä asettamalla sen "aloitusasentoon". Nyt voit käyttää komentosarjaa, joka kasvattaa vasemman ominaisuuden arvoa yhdellä muutaman millisekunnin välein, kunnes se on yhtä suuri kuin selainikkunan leveys vähennettynä elementin leveydellä. Tuloksena on lohko, joka ilmestyy vasemman reunan takaa, rullaa koko näytön poikki ja "pysäköi" sen oikealle puolelle.

Toinen esimerkki mahdollistaa "suhteellisten absoluuttisten" elementtien luomisen. Voit esimerkiksi sovittaa absoluuttisen toisen sisään, jolla on sijaintisuhde. Tuloksena on ”suhteellinen” lohko, jolla ei ole kokoa, johon absoluuttinen on kaiverrettu, ja joka nyt voi esiintyä sitä edeltävien elementtien mukaan.

Yleisiä virheitä käytettäessä sijaintisuhdetta

Yleisin virhe Position Relative -käytössä on, että monet taittosuunnittelijat unohtavat mahdollisuuden varata tilaa lohkolle, joka voi sijaita missä tahansa. Jos sinulla on esimerkiksi melko suuri, joka on sijoitettu näytön ulkopuolelle ja suhteellisen sijoitettuna, sen tilalle tulee "reikä". Kuitenkin jopa tämä ominaisuus, joka joskus aiheuttaa tiettyjä haittoja, voidaan käyttää hyväksi, esimerkiksi luoda mielenkiintoinen vaikutus "itsekokoavasta" sivustosta, jossa kaikki sen lohkot sijoitetaan vähitellen huipulle: 0-asento; vasen: 0; eli alkuperäiselle paikalleen.

Paikannus määritetään ominaisuuden avulla asema. Kiinteistöllä voi olla neljä arvoa, jotka otamme huomioon.

Absoluuttinen asemointi

Absoluuttinen paikannus määritetään seuraavasti:

Asema: ehdoton

Tämän jälkeen lohko menettää tavanomaiset ominaisuutensa ja putoaa kokonaan virtauksesta. Mikä on virtaus tässä yhteydessä? Yritä sijoittaa useita lohkoelementtejä peräkkäin merkinnöissäsi. He seuraavat toisiaan. Tämä on lohkojen oletuskäyttäytyminen. Jos lohkolle on määritetty absoluuttinen sijoittelu, se putoaa kokonaan virrasta, muut lohkot yksinkertaisesti lakkaavat huomaamasta sitä, mutta elementti jää sivulle. Absoluuttista asemointia käytetään usein yksittäisten elementtien kohdistamiseen tarkasti.

Sitä voidaan nyt siirtää ominaisuuksien avulla vasemmalle, oikein, alkuun Ja pohja. Oletusarvoisesti liikettä tapahtuu suhteessa selainikkunan reunoihin, mutta jos pääelementillä on asema: suhteellinen, silloin siirtymä tapahtuu suhteessa emolohkoon.

Block( sijainti: absoluuttinen; alaosa: 0; oikea: 0; tausta: harmaa; )

Elementti luokan kanssa lohko siirretään selaimen oikeaan alakulmaan.

Katsotaanpa esimerkkiä, jossa lohko on pääelementin sisällä.

Estä yläelementin sisällä

Määritimme ensin suhteellisen sijainnin ylätason säilölle ( suhteellinen), ja elementille lohko asettaa absoluuttinen. Tämän seurauksena koordinaatteja ei lasketa itse selainikkunasta, vaan pääelementin eli lohkon reunoista. kääre.

Suhteellinen sijoittelu

Suhteellinen sijoittelu kirjoitetaan näin: asema: suhteellinen. Koordinaatit määritetään samoilla ominaisuuksilla kuin absoluuttisessa paikannuksessa. Ainoa merkittävä ero on, että elementti ei muodollisesti putoa virtauksesta - sille jää tilaa.

Tämän arvon suorituskykyä voidaan verrata näkyvyys: piilotettu, kun elementti on piilotettu sivulta, mutta sen alla oleva tila pysyy koskemattomana. Lohkoa voidaan siirtää minne tahansa, mutta sille varattu tila jää tyhjäksi eikä sitä vie muut osat. Voit siirtää lohkoa ominaisuuksien avulla alkuun, vasemmalle ja niin edelleen.

Muista, että offset ei tule selainikkunan reunoista, vaan paikasta, jossa lohko alun perin oli.

Vakiolohko

Vakiolohko

Lohko siirtyy 50 pikseliä oikealle ja 10 pikseliä ylöspäin. Mutta hänen paikkansa pysyi koskemattomana.

Vakiolohko

Kuten näet, voit asettaa myös negatiivisia arvoja.

Kiinteä asento

Yleinen vaihtoehto on se, kun rullattaessa elementti näytti olevan liimattu yhteen paikkaan. Sitä käytetään usein esimerkiksi sivuston otsikossa. Tämä toteutetaan pääasiassa kiinteällä paikannuksella. Tätä varten sinun on kirjoitettava:

Estä (sijainti: kiinteä;)

Käyttäytymisessä kiinteä siirtymä on samanlainen kuin absoluuttinen - elementti putoaa normaalista virtauksesta, sen paikka vapautuu ja muut elementit eivät huomaa sitä ollenkaan. Tällä tekniikalla voit helposti luoda sivustollesi ylä-, ala- ja sivupaneeleja, jotka eivät katoa vierittäessä ja ovat aina näkyvissä.

Staattinen paikannus

Viimeinen tyyppi on staattinen paikannus, tämä on lohkoelementtien tavallista käyttäytymistä. Sitä ei tarvitse määrittää, koska se on oletuksena. Mutta joskus asento: staattinen käytetään ohittamaan muut sijoitukset tietyissä verkkosivun tapahtumissa JavaScript-skripteissä.

JA vasemmalle, niiden avulla voit siirtää sijoitetun elementin tiettyyn reunaan nähden. Alla oleva esimerkki näyttää mahdollisia elementtien sijoittelutyyppejä:

1. sijainti : suhteellinen (suhteellisesti sijoitettu elementti). Kun käytät omaisuutta vasemmalle sijoitettu elementti on siirtynyt nykyiseen sijaintiinsa nähden (negatiivinen arvo siirtää elementin vasemmalle, positiivinen arvo oikealle). Vasemman esimerkin avulla: 200px;
2. sijainti : absoluuttinen (absoluuttisesti sijoitettu elementti). Kun käytät omaisuutta vasemmalle sijoitettu elementti on siirtynyt esi-isänsä vasempaan reunaan (negatiivinen arvo siirtää elementin vasemmalle, positiivinen arvo oikealle), ja esi-isällä on oltava jokin muu sijaintiarvo kuin oletus-staattinen, muuten count on suhteessa selainikkunan vasempaan reunaan (kuten sijainti on kiinteä ). Vasemman esimerkin avulla: 40px.
3. asento : kiinteä (elementti kiinteällä sijoittelulla). Kun käytät omaisuutta vasemmalle sijoitettu elementti on siirretty suhteessa selainikkunan vasempaan reunaan (negatiivinen arvo siirtää elementin vasemmalle, positiivinen arvo siirtää elementtiä oikealle). Esimerkkinä vasen: 40px.
4. sijainti : staattinen (staattisesti sijoitettu elementti - tämä on oletusarvo). Omaisuuden arvo vasemmalle ei vaikuta elementin sijoitukseen.

Saat lisätietoja paikannuselementeistä CSS-opetusartikkelista.

Selaimen tuki

CSS-syntaksi:

JavaScript-syntaksi:

Object.style.position = "absoluuttinen"

Kiinteistöjen arvot

CSS-versio

Peritty

Animoitu

Käyttöesimerkki

h1(sijainti:staattinen;)

Tässä esimerkissä käytetään kaikkia mahdollisia paikannustyyppejä esittelytarkoituksiin - staattista, suhteellista, absoluuttista ja kiinteää. Esimerkkimme tulos.