CSS z-index: ülevaade, omadused

Reegel CSS z-index - lehekülg element seisukoht kooskõlastada Z: tase ekraanil elemendi või kus ta asub. Tag, mis on z-index suurem kuvatakse täis. Sildid kuvatakse ilmumise järjekorras siseneva voolu ja kattuvad. приоритет видимости. Z-indeksi väärtus määrab nähtavust prioriteet.

Peame austust kaasaegsete brauseritega ja algoritme kuva elemente. Kuna päevad, mil graafika ja kata ekraanid moodustatud lõikamine probleem nähtav ja nähtamatu osa elemente programmiaknas nähtavat monitoridele sisu on jõudnud suurepäraseid tulemusi. Brauseriaknas, kõik elemendid on õigesti kuvada, kasutaja näeb ainult seda, mida on täpsustatud projekteerimise või arendaja.

Üldreegel: järjekorras ja tase

Sisendivoost (lehekülg moodustatud server) järjestikku loeb brauserit. Kõik sildid kuvatakse vastavalt CSS reeglid ja võivad kattuda.

See näide kirjeldab nelja nähtav element. Iga järgnev kattub eelmisega. Kohtades, kus sildid on ületanud, on küsimus prioriteet. Üldjuhul z-index CSS silte kõik need samad ja võrdsed 848, siis on see ilmne, et element, mis läheb järgmiselt. Kõik, mis peeks välja iga järgmise elemendi, ilmselt.

reegel nähtavust

Brauserid järgiksid nähtavust ainult "õiglane". Et tulla algoritmi, mis võimaldab teil analüüsida kõiki bruto kehtestamist ja kasutada ainult neid, mis tegelikult ristuvad, välja arvatud osad, mis imendudes iga järgnev element - on väga raske.

Enamikul juhtudel ei ole see vajalik. Moodne tehnika on väga kiire ja teate tõmmata element punktini, kus see blokeerib järgmise elemendi, on väga problemaatiline.

Mõju element massiivi

Piisab sellest, kui kolmas tag scCSS3 suurendada z-indeks ning kell scCSS4 - seda vähendada, üldpildi muutub. Jada elemendid voos jääb samaks:

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

Tuleb märkida, et teine pilt on tegelikult võtab rohkem ruumi kui tundub. Kolmas pilt on sama. Lisaks koosneb kahest osast (kaks muna) kaugusel üksteisest.

Tegelik suurus piirkondades, mis hõlmavad teises ja kolmandas pilte Kollased ja hall vastavalt.

Kombinatsioon z-register background-color

Tuleb märkida, et omadusi CSS tausta ja z-index täiendavad teineteist. Kõik plokitasandi elemente ning mis tahes muud, istuma ristkülikukujulise alaga, mis moodustub maksimaalse kõrguse ja maksimaalse laiusega sisu.

Kasutades pilte, mida saate teha mis tahes vormis valdkonnas element, kuid tema ümber on alati olemas ristkülik. See on asjaolu, et see on oluline võtta arvesse nõuetekohaselt.

Võite panna teksti valitud tee kuju, aga kui sa seda ei tee, sisu muutub mis tahes element nelinurkse järgemööda kättesaamisel sisend.

Kasutage omadusi CSS z-indeks element, mille background-color väärtus on läbipaistev (mingi läbipaistvus), võib jäljendada ükskõik vooluahela element. Kuigi igal juhul tegelikult element on ristkülikukujuline.

Sündmused ja nähtav elemendid

Kohtades, kus element on blokeeritud teise elemendi, sündmuste, see ei toimi. Üldreeglina, kui toode on varjatud kohas, ta on ka kättesaadavus tsooni.

Kui arendaja tahab lukustamiseks nuppu või menüü, siis võib ka panna üle kesklukustus tag teise tag ehk läbipaistev (nt kasutades õigusriigi CSS läbipaistmatus), kuid igal juhul on suurema CSS z-indeks.

Kuna sündmus, kasutaja seisukohast, võib jagada asjakohaste ja ei ole ühtegi, siis viimase (hiirt liigutades, vajutades juhuslikult nupud klaviatuuril, taimer signaali) saab kasutada piisavalt sisu muutmiseks brauseriaknas.

Lihtne näide: kui külastaja on liikunud hiirekursori aasta menüü, kuid pole veel otsustanud midagi teha. Arendaja võib anda juhul jälgida liikumist dialoogi soovitud punkti (kliki - külastaja otsustab) ja kuvada piisava sisu. Reegel CSS z-indeks on kõige sobivam selleks puhuks.

Pilt formaat

Kuna pildid on oluline ehitusmaterjal tahes kohas (ilu, modernsus, funktsionaalsus - on tavaline norm asju), siis on väga oluline, et pildi formaat valikuid.

Üldiselt saab kasutada kõiki erinevaid olemasolevaid formaate, kuid nii praktilisuse ja tõhusus on üsna mõistlik piirduda * .png staatiliste piltide ja * .gif - animeeritud pilte. Enim * .jpg on ka hea, kuid see ei võimalda paindlikkust manipuleerida ekraani ruumi.

Browser vead ja arendaja

Mitte nii tihti juhtub, kui CSS z-index ei tööta, kuid see juhtub. Tingimused kaskaadlaadistikke alati tööd ja maht stiili faili sageli jõuda märkimisväärsetes kogustes. Kui midagi ei kuvata, või lihtsalt ei ole, mida tuleb, tuleb kõigepealt kontrollida oma koodi, siis tühjendage brauseri vahemälu ja katsetada oma kood uuesti.

Suuline HTML ja CSS, brauser on peaaegu ei tee vigu - see on aksioom. Kui soovitud toode ei juhtu, siis projekteerimisel CSS {asukoht: absoluutne; z-index: 112233; Vasakult: 10px; top: 20px; } ... midagi on puudu või ei salvestata.

Kõige tavalisem viga - vale Näidatud element puudub viide selle nähtavust absoluutne või suhteline positsioon. Mõnikord võib töötada täpsustada stiili otse element ja ei ole tema stiil. Viimasel juhul on väljapääs, kuid see on peamiselt räägime mingi vea kood.

Style peab olema klassi või ID järgi. Osutuslaad element peaks ainult erandjuhtudel.

Kasutades jQuery.css (z-indeksi 123) võib viia ka veaga, kui ei rakendata klassi või tunnust. Lisaks jQuery - tõeliselt tähelepanuväärne arendamise vahend. Kuid enne, kui seda kohaldada, ei ole valus mõelda: kas on võimalik loobuda improviseeritud tähendab HTML / CSS, z-index - ei ole reegel, mis ei nõua kohest tähelepanu.

Õige liikumine loogilist kihtide ja

Perfect Page - korter. Igal juhul enne tegelikku kolmemõõtmelise kujutise kaugel massiliselt, ja mitte selles erilist vajadust. Modern veebilehed - see on reaalne kogemus, reaalse maailma ülesandeid. Nad lihtsalt peavad töötama hästi ja näidata korter kolmemõõtmelise kujutise.

Muide, nähtus koduleheks (kodulehe) kujul valikud "leheküljel hoone" - parim tõend, et korter ristkülikukujuline ja kuiv, kuid väga täpne sisu - ka hea ja praktiline. Kuid tuleb märkida, et saite monopoli ettevõtted kinni nende peamine - nägu ettevõtte, selle funktsionaalsust ja elektri tootmiseks. Infotehnoloogia Monsters arvas, et sihtlehtedega - see on väikeettevõtted nägu, tarvikud, Herbalife ja muud "ehted".

Meeldib või mitte, tegelikult õige, tulevik näitab. On oluline, et mitte ainult mõistlik maalida kihid sisu, vaid ka tagada õige liikumine nende vahel igal variant hoone veebilehel.

Suurepärane lahendus - AJAX (lehekülg uuendatakse vastavalt vajadusele). Veelgi paljutõotav lahendus, kui leht näitab, et see on vajalik siinkohal brauseriakna.

Tegelikult z-index - see lihtne reegel CSS. Selle eesmärk - näidata taset sildi, nii et brauser saab määrata, millal kuvaelemendiks ja mis osa sellest element on nähtav. Layer ja leht - väga suhteline mõiste, sest see on problemaatiline kujundada lehele ja meeles pidada tähenduses Reegel z-indeks erinev sisu ekraanil.

Tavaliselt arendaja valib lemmik number ja annab selle kõik silte järjest ning asjaolu, et me peame kuidagi välja paistma, määrab järgmise numbri. Tähtsaks kihid ja taseme lehed - ei ole eriti progressiivne ja paljutõotav tavasid.

Kui aga liikuda semantika z-indeksi dialoogi külastaja, on võimalik luua praktilist mõju. Sarnaselt kuidas silte saab peal üksteist, on võimalik kehtestada dialoogi (saidikülastaja) ja täita liikumist nende vahel. Sellest vaatenurgast kohaldamise eeskirju CSS z-index tundub olevat väga teostatav ja otstarbekas.