CSS z-index: yleiskatsaus, ominaisuudet

Sääntö CSS z-index - Sivuelementtien asema koordinoida Z: taso näyttöelementin tai kerrokseen, jossa se sijaitsee. Tunniste, joka on z-indeksi on suurempi näkyy kokonaisuudessaan. Tunnisteet näkyvät siinä järjestyksessä kuin ne esiintyvät tulevan virtauksen ja päällekkäisyyttä. приоритет видимости. Z-indeksin arvo määrittää näkyvyyttä prioriteetti.

Meidän on kunnioitusta uudet selaimet ja algoritmit näyttöelementit. Ajoista, jolloin grafiikkaa ja jää näytöt muodostetaan leikkautumisongelma näkyviä ja näkymättömiä osia elementtien sovelluksen ikkunassa näkyvää näytön teknologia on saavuttanut erinomaisia tuloksia. Selainikkunassa, kaikki elementit näytetään oikein, käyttäjä näkee vain sen, mitä on määritelty suunnittelun tai kehittäjä.

Yleinen sääntö: järjestys ja taso

Tulosignaalista (sivu muodostettu palvelin) peräkkäin lukee selaimen. Kaikki tagit näkyvät mukaisesti CSS sääntöjä ja osittain päällekkäisiä.

Tämä esimerkki kuvaa neljä näkyvissä elementti. Kukin peräkkäinen limittäin edellinen. Paikoissa, joissa tunnisteet ylitetään, on kysymys ensisijaisesti. Pääsääntöisesti z-index CSS tunnisteet kaikille nämä samat ja sama 848, on selvää, että elementti, joka menee seuraavasti. Kaikki tämä kurkistaa alta jokaiseen seuraavaan elementin, ilmeisesti.

sääntö näkyvyys

Selaimet noudattavan näkyvyyttä vain "reilu". Keksiä algoritmi, jonka avulla voit analysoida kaikkia brutto määräämistä ja käyttää vain ne, jotka todella leikkaavat, josta nämä osat, jotka voivat imeytyä kukin peräkkäinen elementti - on hyvin vaikeaa.

Useimmissa tapauksissa tämä ei ole välttämätöntä. Nykyaikaiset laitteet on erittäin nopea, ja huomaa piirtää elementti siihen pisteeseen, jossa se estää seuraavan alkion, on hyvin ongelmallinen.

Vaikutus alkiotaulukon

Riittää kun kolmannen tunnisteen scCSS3 lisätä z-indeksin ja scCSS4 - vähentää se, koko kuva on muuttunut. Sekvenssin elementtien virta pysyy samana:

• id= 'scCSS1'; div id = 'scCSS1';
• id= 'scCSS2'; div id = 'scCSS2';
• id= 'scCSS3'; div id = 'scCSS3';
• id= 'scCSS4'. div id = 'scCSS4'.

On huomattava, että toinen kuva on todella vie enemmän tilaa kuin miltä se näyttää. Kolmas kuva on sama. Lisäksi, se koostuu kahdesta osasta (kaksi munaa) välimatkan päässä toisistaan.

Todellinen koko alueiden, jotka varaavat toinen ja kolmas kuvat korostetaan keltaisella ja harmaa vastaavasti.

Yhdistelmä z-indeksin taustavärin

On huomattava, että ominaisuudet CSS tausta ja z-index täydentävät toisiaan. Kaikki lohkoelementeille, ja muita, aina miehittää suorakulmainen alue muodostuu maksimikorkeus ja suurin leveys sisältöä.

Käyttämällä kuvia, voit tehdä minkäänlaista kenttäelementtinä, mutta hänen ympärillään on aina suorakulmion. On tosiasia, että on tärkeää ottaa huomioon oikein.

Voit laittaa tekstiä polulla määrätty muoto, mutta jos et, sisältöä saa minkä tahansa elementin suorakulmaisen laatikon, peräkkäin, saatuaan tulo.

Käyttö ominaisuudet kohdalla CSS z-indeksi elementin, jonka tausta-väriarvo on läpinäkyvä (eräänlainen läpinäkyvyys), voi jäljitellä tahansa piirielementin. Vaikka joka tapauksessa todellisuudessa elementti on suorakulmainen.

Tapahtumat ja näkyviä elementtejä

Paikoissa, joissa elementti on estetty toiseen elementtiin, tapahtumat se ei toimi. Pääsääntöisesti, jos kohde on poissa silmistä, hän on myös saatavilla alueella.

Jos kehittäjä haluaa lukita painikkeen tai valikon, se voi hyvinkin olla sijoitettu yli lukitus tunnisteen toisen tunnisteen, ehkä läpinäkyvä (esim sääntöä käyttäen CSS opasiteetti), mutta joka tapauksessa, jolla on korkeampi CSS z-indeksi.

Koska tapahtuma, käyttäjän näkökulmasta, voidaan jakaa asiaa ja ei ole mitään, sitten viimeinen (liikuttamalla hiirtä, painelemalla satunnaisia näppäimistön, ajastimen signaali) voidaan käyttää riittävästi muuttaa sisältöä selainikkunassa.

Yksinkertainen esimerkki: vierailija on siirtynyt hiiren osoittimen valikon kohtaa, mutta eivät ole vielä päättäneet tehdä jotain. Kehittäjä voisi tarjota tapahtuman seurata liikkeen vuoropuhelun haluttuun kohtaan (klikkaa - kävijä päättää) ja näyttää riittävän sisältöä. Sääntö CSS z-indeksi on parhaiten tilaisuudessa.

Kuvaformaatti

Koska kuvat ovat tärkeä rakennusaine mille tahansa sivustolle (kauneus, nykyaikaisuus, toimivuus - on tavallinen normi asioita), on erittäin tärkeää, että kuvan muodossa valintoja.

Yleisesti ottaen voit käyttää kaikkia erilaisia nykyisten muodoissa, mutta suhteen käytännöllisyys ja tehokkuus on varsin kohtuullinen rajoittaa * .png staattisten kuvien ja gif - animoituja kuvia. Suosittu * .jpg on myös hyvä, mutta se ei salli joustavuutta manipuloida näyttelytilaa.

Selainvirheitä ja kehittäjä

Ei niin usein käy, kun CSS z-index ei toimi, mutta se tapahtuu. Mitattuna CSS aina toimi, ja volyymi tyylitiedostosta saavuttaa usein huomattavia määriä. Kun jotain ei ole näkyvissä, tai vain ei ole mitä on, on ensin tarkistaa oman koodin, tyhjennä selaimen välimuisti ja testata omaa koodia uudelleen.

Tulkkaus HTML ja CSS, selain on lähes ei tee virheitä - se on selviö. Jos haluttu kohde ei ole, niin, suunnittelussa CSS {kanta: absoluuttinen; z-index: 112233; vasen: 10px; top: 20px; } ... jotain puuttuu tai ei tallenneta.

Yleisin virhe - väärä Näkyy elementti puuttuu viittaus sen näkyvyyttä absoluuttinen tai suhteellinen asema. Joskus se voi toimia määrittää tyyliin suoraan elementin ja ei ole hänen tyylinsä. Jälkimmäisessä tapauksessa, se on tapa, mutta se on ennen kaikkea puhumme jonkinlainen virhe koodissa.

Tyyli on luokassa tai tunnus tyyliä. Osoittaa tyyli elementti olisi vain poikkeustapauksissa.

Käyttäen jQuery.css (z-indeksin, 123) voi myös johtaa virheen, jos ei sovelleta luokan tai tunnisteen. Lisäksi jQuery - todella merkittävä kehityksen väline. Kuitenkin ennen kuin haet sitä, ei satu ajatella: onko mahdollista luopua improvisoituja tarkoittaa HTML / CSS, z-index - ei sääntö, joka ei vaadi välitöntä huomiota.

Oikea liikkeen looginen kerrokset, ja

Perfect Page - tasainen. Joka tapauksessa, ennen kuin todellinen kolmiulotteinen kuva kaukana laajamittaista, eikä tätä erityistä tarvetta. Moderni sivustot - se on todellinen kokemus, reaalimaailman tehtävissä. Ne täytyy vain toimia hyvin ja näyttää tasainen kolmiulotteinen kuva.

Muuten, ilmiö aloitussivun (aloitussivu) muodossa vaihtoehdoista "sivuston rakentamiseen" - paras todiste siitä, että litteän suorakaiteen muotoinen ja kuiva, mutta erittäin tarkka sisältö - myös hyvä ja käytännöllinen. Mutta on huomattava, että sivustot monopolin yhtiöiden tarttunut tärkeintä - kasvot yritys, sen toimivuus ja sähkön tuotantoon. Tietotekniikka Monsters kokivat aloitussivut - se on pieni yritykset kohtaavat, tarvikkeet, Herbalife ja muut "koruja."

Kuten se tai ei, itse asiassa oikein, tulevaisuus näyttää. On tärkeää, että ei ole järkevää pelkästään maalata kerroksittain sisältöä, mutta myös varmistaa asianmukainen liikkuminen niiden välillä milloin tahansa muunnelma rakentaa verkkosivuilla.

Erinomainen ratkaisu - AJAX (sivu päivitetään tarpeen mukaan). Vieläkin lupaava ratkaisu, kun näytetään, että on tarpeen tässä vaiheessa selainikkunan.

Itse asiassa, z-index - tämä yksinkertainen sääntö CSS. Sen tarkoituksena - osoittaa tason tunnisteen niin, että selain voi määrittää, milloin näyttö elementti ja joka osa tätä elementtiä näkyvät. Kerros ja sivu - hyvin suhteellinen käsite, koska se on ongelmallista suunnitella sivulle ja pitää mielessä artiklan mukaisen z-indeksin eri sisällön näyttämisen.

Tyypillisesti kehittäjä valitsee suosikki numero, ja antaa sen kaikki tagit peräkkäin, ja se, että meidän täytyy jotenkin erottua, määrittää seuraava numero. Kiinnitä huomiota kerroksiin ja tasot sivut - ei ole erityisen edistyksellinen ja lupaavia käytäntöjä.

Jos siirto semantiikkaa z-indeksin vuoropuhelua kävijä, on mahdollista luoda käytännössä. Samaan tapaan tunnisteita voidaan päällekkäin, on mahdollista määrätä vuoropuhelun (sivuston kävijä) ja suorittaa liikkeen välillä. Tästä näkökulmasta soveltaminen CSS z-indeksin näyttää olevan hyvin toteutettavissa ja käytännöllinen.