Asemassa suhteessa - mikä se on? yksityiskohtainen kuvaus

Pesiä HTML - pitkällinen prosessi, tiukka, mutta erittäin luova. Huolimatta siitä, että suurin osa ihmisistä työskentelee IT, verkkosivut asettelu voi tuntua tylsä rutiini, asiantuntijoita, jotka ovat kutsumus Tällöin ei vain laadullisesti tehtävään, mutta myös saada prosessista aineellisten ilo.

Kuitenkin ennen kuin tulet kokenut koodaaja, jokainen tulokas viettää paljon aikaa opiskeluun eri ohjeita ja teknisiä sekä HTML-kieleen ja sen liittolainen - CSS. Noin tarkalleen mitä CSS, mitä se on ja mitä "harhautus korvat" voit nousta, sekä yksi sen tärkeimmistä ominaisuuksista - asema suhteessa - tänään niin jutellaan.

Mikä on CSS?

CSS Lyhenne voidaan kopioida ja käännettiin venäjäksi nimellä "CSS". Se kuulostaa oudolta - toisaalta, näyttää selvältä, ja sanat, ja toisaalta - yleisestä merkityksestä ei välittömästi kiinni. Aloitetaan yksinkertainen - tyylillä. Tämän tekniikan avulla voit liittää objekteja sivulla, tiettyjen ominaisuuksien osalta vaikutelman, että voit vain rekisteröityä kerran ja käyttää lukemattomia kertoja.

Sana "taulukko" in virallisen käännöksen ilmestyi melkein vahingossa - itse asiassa sopivampi tässä olisi käyttää sanaa "listoja" tai "listoja", mutta kirjoittajat alkuperäisen käännöksen päätti, että CSS näyttää enemmän kuin listan, ja keitä me olemme tällainen on nyt kokeilla niitä.

Lopuksi sana "Cascade." Tosiasia on, että kukin elementti voi olla useita tyylejä, jotka voidaan sekoittaa tai jopa päällekkäisiä. Tällöin selain on turvauduttava joukko sääntöjä, jotta säveltää ulkonäön lohkon, joka osoittautui useita tyylejä, joista yksi esimerkiksi on asemassa suhteessa omaisuutta, ja toinen - Sijainti Absoluuttinen. Itse asiassa nämä konfliktit ei voida hyväksyä, mutta suurissa hankkeissa kuten sekavuus tapahtuu melko usein.

Joten nyt, kun kaikki on selvää nimi, Katsotaanpa yksinkertainen esimerkki. Oletetaan, että sivusto olisi suuri määrä painikkeet, joiden tietyllä tavalla. Niillä on ominaisuuksia, kuten kokoa, varjo, peittävyyttä, väri. Tietenkin voit määrittää nämä parametrit, luomalla kunkin painikkeen, mutta on paljon helpompi käyttää CSS. Käytännössä tarvitaan kuvaamaan tiettyä luokkaa, jossa luetellaan kaikki arvot edellä olevista ominaisuuksista, ja sitten, sen sijaan, että pitkä lista, tag jokaisen painikkeen tarvitsee vain määrittää luokan nimi, selain itse värjää näitä elementtejä haluttu väri ja antaa heille asianmukaista "kiilto".

Mitä kannan omaisuutta?

Nyt siirtyä suoraan kiinteistön kannan vuoksi aloitettua tämä koko artikkeli. Jos olet perehtynyt Englanti kielellä, tai on hyvä intuitio, sinun pitäisi jo olla selvää - tämä ominaisuus on vastuussa kohteen sijainti. Itse asiassa, niin se on, mutta sen sijaan määritellä tiettyyn paikkaan, tämä ominaisuus kertoo selaimelle, miten se tulee sijoittaa yhden tai toisen elementin suhteen viereiseen tai sivun poikki kokonaisuudessaan.

Mitkä arvot voidaan sijaintitilaan omaisuutta?

Meidän omaisuus voi ottaa monta eri arvoa, on vain viisi. Tässä on lyhyt kuvaus kustakin:

• Asento Peri. Tämän toiminnon avulla voit kopioida tietoja aseman elementti, joka on vanhempi. Esimerkiksi jos sinulla div tietyn asemassa suhteessa, niin tuli sitä IMG perivät arvo myös asetetaan Suhteellinen.
• Sijoita Staattinen. Tämä arvo annetaan kaikki elementit automaattisesti, ellei mitään muuta. Elementit sopivat asentoon, kuten on mainittu koodi ja eivät ole käytettävissä erilaisia "tavallinen", jonka avulla on mahdollista muuttaa asentoon.
• Asento Absoluuttinen. Tällä arvolla Position omaisuus on melko usein käytetään tapauksissa, joissa on tarpeen luoda "kelluva" elementti. Tietyllä kiinteistön arvosta tuote on "näkymätön" muiden komponenttien sivun. Eli ne järjestetään ikään kuin ehdoton ei ole olemassa. Hän itse on aina paikallaan, riippumatta siitä, kuinka pitkälle vieritetään sivua.
• Asennossa. Monin tavoin, tämä arvo on samanlainen kuin edellinen, mutta, kun taas absoluuttinen elementti on sidottu vanhempi, kiinteä käytöt vain koordinaatit vasemmassa yläkulmassa selaimen näytön, välittämättä loput elementit, jotka edelsivät sitä.
• Lopuksi asemassa suhteessa. Tämän tyyppinen arvot mahdollistaa asemointielementti suhteessa muihin, joka voi olla hyödyllistä luoda adaptiivisen merkintä kutsutaan yhteisesti "kumi". Tätä ominaisuutta, kohde "työntää" toinen, menettämättä kyky muuttaa niiden sijaintia sivulla.

Työskentely Sijoitus eri selaimilla

Kaikki selaimet ovat yhtä yhteensopivia. Vaikka useimmat vaihtoehtoisia ohjelmia Internetin ilman juuri ilmennyt koettu arvo kanta on aivan totta, "kroonisesti erityinen» Internet Explorer pitää omaisuutta, riippuen versiosta.

Esimerkiksi käyttämällä jo "haudattu" selain IE6, et voi käyttää arvoa Kiinteät ja Peri - "aasi" ne yksinkertaisesti sivuuttaa sitä. Huolimatta siitä, että seitsemäs versio tilanne alkoi parantua, ja Fixed jo käsitelty, periä rakastettu "selaimen ladata muita selaimia," saavutettiin vasta kahdeksannen inkarnaatio.

Loput tarkkailijoiden rauhallisesti kahva kannassa ensimmäinen versio, lukuun ottamatta Opera, joka on saanut tukea ominaisuuksia sen 4 muunnelmia, julkaistiin 90-luvun puolivälissä.

Työskentely Sijoitus JavaScript

Itse tarina miten työtä Position kiinteistön Javascript on, olemme mukana vain vuoksi säädyllisyyden. Koska tämä ominaisuus ei ole mitään erityistä merkkiä otsikossa, voit käyttää JS ilman muutoksia, esimerkiksi asettaa div asemassa suhteessa, pitäisi sisällyttää kaltainen rivi: div.style.position = 'suhteellinen'.

Kuten näette, se on melko yksinkertainen.

Miksi asema suhteessa on kiinnitettävä erityistä huomiota?

Vaikka suurin osa kiinteistöjen arvot kannan, lievästi sanottuna, "sylki" ympäröivään elementtejä käyttäen arvoa "tyyliin kanta: suhteellinen", pitäisi aina muistaa koko sivun kokonaisuudessaan, koska väärä käyttö saattaa voimakkaasti "vinossa" koko sisältö näytön .

Lisäksi tämä ominaisuus vain voit helposti muuntaa kiinteään suunnittelu mukautuva, koska sen soveltaminen vaikuttavat automaattisesti kaikki sisältö sivuilla. Sitten meillä on vielä aikaa harkita esimerkkejä ja virheet tämän arvon, ja näet sen konkreettisia käytännön merkitystä.

Milloin kannattaa käyttää suhteellisia paikannus?

Lisäksi tavanomainen asettelu sivujen HTML asema suhteessa usein luoda erilaisia mielenkiintoisia vaikutuksia. Jos esimerkiksi haluat kohde "tuli" sivulla tai päinvastoin, vähitellen ylitti sen alueella, se on juuri tämä ominaisuus voi auttaa toteuttamaan tämän "temppu".

Nämä "temppuja" pannaan täytäntöön Javascript on, tai, jos tavoitteena asteittaisen käyttöönoton kautta ominaisuuksia CSS3, joiden avulla voit säätää syklinen arvonmuutos tietyn muuttujan.

Lisäksi joissakin tapauksissa mahdollista luoda "hybridi" arvojen asemaan suhteessa. CSS, mutta ei samaan aikaan voidaan asettaa jotain position: absolute suhteellista, mutta käyttäen joitakin temppuja, se on vielä mahdollista saavuttaa tämä vaikutus. Tämä lähestymistapa voi olla hyödyllinen tapauksissa, joissa sinun pitää luoda jotain monimutkaisia kuin työkaluvihje tai ponnahdusvalikosta. Ottaen huomioon esimerkit, annamme kuvaus rakenteen tällaisen "hybridi".

Esimerkkejä käyttäen suhteellista sijoitusta

Asemassa suhteessa - se on melko yksinkertainen, mutta joustava, jonka avulla voi toteuttaa monia mielenkiintoisia vaikutuksia. Jotta ei tuhlata aikaa ja paikka kirjoittaa hyödytön koodia malliin, esitämme useita suullisia algoritmeja, jotka voivat koristella sivuston tai tiettyjä sivuja.

Aloitetaan "loppuu" linjaa. Oletetaan, että tarve käyttää joka "matkustaa", koska vasemman näytön reunaan ja hitaasti siirtää sen oikealle puolelle. Toteuttaa tällainen "mekanismi" tulee asettaa kanta: suhteellinen; vasen: -100px, jossa -100 - arvioitu määrä pikselien muodostavien leveydestä. Tämä tyyli voit piilottaa ulkopuoliselle näytön, laitat sen "alkuasentoon". Nyt voit käyttää skripti, joka kasvattaa aina muutaman millisekunnin vasemmalle kiinteistön arvoa kohti niin kauan kuin se ei tullut levyinen selainikkunan miinus leveys elementin. Tuloksena on yksikkö, joka tulee ulos vasemman reunan, valssatut koko näytön ja "pysäköity" oikeassa kädessään.

Toinen esimerkki voit luoda "suhteellista-absoluuttinen" elementtejä. Esimerkiksi voit kirjoittaa ehdoton sisäkkäin, jolla asema suhteessa. Seurauksena, meillä on "suhteellinen" lohkolle, joka ei ole kooltaan, joka absoluuttinen on merkitty, voi nyt ilmentyä asemaan riippumaton edelliseen elementtiin.

Tyypillisiä virheitä käytettäessä asema suhteessa

Yleisin virhe käytettäessä aseman suhteessa on se, että monet web-suunnittelijat unohtaa kyky varata paikka yksikössä, joka voidaan sijoittaa mihin tahansa. Esimerkiksi, jos sinulla on melko suuri, ulkopuolelle sijoitetut näytön ja jonka suhteellinen paikannus, sen tilalle tulee ammottava "reikä". Tämäkin ominaisuus on joskus aiheuttaa tiettyjä hankaluuksia voidaan käyttää hyväksi, esimerkiksi luomalla mielenkiintoinen vaikutus "itsensä kokoamisen" sivuston, jossa kaikki sen lohkot asteittain sijoitetaan ylimmäksi: 0; vasen: 0; t. e. alkuperäisestä sijainnistaan.