CSS z-index: apžvalga, savybės
CSS taisyklė z-index - puslapio elemento pozicijaZ koordinate: elemento ekrano lygis arba sluoksnis, kuriame jis yra. Žyma, turinti daugiau z-indekso, bus rodoma visa. Žymos rodomos tokia tvarka, kokia jie rodomi gaunamame gale, ir vienas su kitu persidengia. Nustato z-indekso vertę matomumo prioritetas.
Būtina pagirti šiuolaikines naršykles irelementų rodymo algoritmai. Nuo to laiko, kai grafika užfiksavo ekranus ir atsirado aptikimo problema, susijusi su matomomis ir nematomais elementų dalimis, esančiomis taikomųjų programų langeliuose, matomos medžiagos rodymo technologija pasiekė puikių rezultatų. Naršyklės lange visi elementai rodomi teisingai, vartotojas mato tik tai, ką apibrėžia dizainas ar kūrėjas.
Bendroji taisyklė: tvarka ir lygis
Įvesties srautas (serverio sukurtas puslapis) yra nuosekliai nuskaitomas naršyklėje. Visos žymos rodomos pagal CSS taisykles ir gali dubliuotis.
Šiame pavyzdyje aprašomi keturi matomi elementai.Kiekvienas kitas blokuoja ankstesnį. Vietose, kur žymos susikerta, kyla prioriteto klausimas. Kadangi z-index CSS taisyklė visoms šioms žymėms yra ta pati ir lygi 848, kitas elementas yra matomas. Visa, kas atrodo iš kiekvieno kito elemento, matyt.
Matomumo taisyklė
Naršyklės laikosi matomumo taisyklėstik "sąžiningai". Sugalvoti algoritmą, kuris leidžia jums analizuoti visą bruto skyrimo ir naudoti tik tie, kurie iš tikrųjų susikerta, išskyrus tas dalis, kurios yra absorbuojamas kiekvieno kito elemento - yra labai sunku.
Daugeliu atvejų tai nėra būtina. Šiuolaikinė įranga veikia labai greitai, todėl labai sunku pastebėti elemento perrašymą prieš tai, kai kitas elementas jį pakeičia.
Poveikis elementų sekai
Pakanka, kad trečioji scCSS3 žyma padidintų z indekso reikšmę, o scCSS4 - sumažintų ją kaip bendrą vaizdą. Tokiu atveju sekančių elementų srautas seka:
- divas id ="scCSS1";
- divas id ="scCSS2";
- divas id ="scCSS3";
- divas id ="scCSS4".
Reikia pažymėti, kad antrasisnuotrauka iš tikrųjų užima daugiau vietos nei atrodo. Trečias paveikslėlis taip pat. Be to, ji susideda iš dviejų dalių (dviejų kiaušinių), esančių atstumu viena nuo kitos.
Tikrosios antrosios ir trečiosios nuotraukos užimtų sričių dydžiai yra pažymėti atitinkamai geltonai ir pilkai.
Z-indekso su fono spalva derinimas
Atminkite, kad CSS savybėsfonas ir z-indeksas papildo vienas kitą. Visi blokiniai elementai ir bet kuris kitas visada užima stačiakampį plotą, kurį sudaro maksimalus aukštis ir maksimalus turinio plotis.
Naudojant vaizdus, galite suteikti bet kokią formos elemento plotą, bet visada bus ties ketvirčiu. Tai yra tai, kad svarbu teisingai apsvarstyti.
Galite įdėti tekstą aplink kontūrąskaičiai, bet jei tai daroma, turinys patenka į bet kurį elementą, kaip stačiakampio formos dėžutę, ir po jo, kai jis gaunamas iš įvesties srauto.
Naudojant z elemento CSS nuosavybę elementaskuri fono spalva yra skaidri (tam tikros skaidrumo rūšis) leidžia imuliuoti bet kurį elemento kontūrą. Nors bet kuriuo atveju iš tikrųjų elementas bus stačiakampis.
Elemento įvykiai ir matomumas
Tais atvejais, kai elementas užblokuotas kitu elementu, įvykiai jame neveiks. Paprastai, jei objektas yra nepastebimas, jis taip pat yra nepasiekiamas.
Jei kūrėjas nori užrakinti mygtuką arbameniu elementas, jis gali įdėti kitą žymę virš blokuojančios žymos, galbūt skaidrios (pvz., naudojant CSS neskaidrumo taisyklę), bet bet kuriuo atveju turint didesnį CSS z indeksą.
Kadangi įvykiai iš vartotojo taškoatsižvelgiant į tai, gali būti suskirstytas į prasmingą ir neturintį tokį, pastarasis (pelės perkėlimas, atsitiktinai paspaudus mygtuką ant klaviatūros, laikmačio signalas) gali būti naudojamas tinkamai pakeisti turinį naršyklės lange.
Paprastas pavyzdys: Lankytojas perkelia pelės žymeklį ant meniu punkto, bet dar nepriėmė nieko. Kūrėjas gali numatyti šį įvykį, stebėti judėjimą iki pageidaujamo dialogo taško (spustelėkite - lankytojas priima sprendimą) ir parodykite tinkamą turinį. Šiuo atveju labiausiai tinka z-index CSS taisyklė.
Vaizdo formatas
Kadangi vaizdai yra svarbūsbet kokios svetainės statybinė medžiaga (grožis, modernumas, funkcionalumas - jau įprasta daiktų norma), formato pasirinkimas labai svarbus.
Apskritai, galite naudoti viskąegzistuojančių formatų įvairovė, tačiau praktiškumo ir efektyvumo požiūriu yra gana protinga apriboti * .png statiniams vaizdams ir * .gif animaciniams vaizdams. Populiarus * .jpg taip pat yra geras, tačiau tai neleidžia lanksčiai manipuliuoti vaizdo erdve.
Naršyklės ir kūrėjo klaidos
Tai dažnai nėra CSS atvejisZ-index neveikia, bet taip atsitinka. Kaskados stiliaus lapų taisyklės visada veikia, o stiliaus failo dydis dažnai pasiekia didelių sumų. Kai kažkas negerai arba tiesiog nėra nieko, kas turėtų būti, pirmiausia turite patikrinti savo kodą, tada išvalyti naršyklės talpyklą ir vėl patikrinti savo kodą.
Vertindami HTML ir CSS, naršyklė yra beveikklaidų darymas yra aksioma. Jei nėra reikalingo elemento, tai reiškia, kad CSS konstrukcijoje {pozicija: absoliutus; z-index: 112233; kairėje: 10 px; viršus: 20 px; ...} kažko trūksta arba rašoma neteisingai.
Dažniausiai klaida yra neteisingai nurodyta.elemento koordinates, praleidžiama jo matomumo, absoliučios ar santykinės padėties indikacija. Kartais ji gali dirbti, kad stilius būtų apibrėžtas tiesiai ant elemento, o ne jo stiliaus. Pastaruoju atveju tai yra išeitis iš situacijos, tačiau pirmiausia tai rodo kokią nors kodo klaidą.
Stilius turi būti nurodytas klasės ar identifikatoriaus stiliuje. Stilius turėtų būti nurodytas elemento tik išimtiniais atvejais.
Naudojant jQuery.css (z-index, 123) taip pat gali sukelti klaidą, jei ji taikoma klaidingai klasei ar identifikatoriui. Be to, "jQuery" yra tikrai puikus kūrėjo įrankis. Tačiau, prieš ją taikant, tai neapsiriboja mąstymu: ar galima tai padaryti su improvizuotomis HTML / CSS priemonėmis, z-indeksas nėra taisyklė, kuriai nereikia daug dėmesio.
Teisingas sluoksnis ir loginis judesys
Puikus puslapis yra plokščias. Bet kokiu atveju, tai yra toli gražu ne iš realaus tūrinio įvaizdžio masiniu mastu, ir to nėra ypatingo poreikio. Šiuolaikinės svetainės yra tikra praktika, tikros užduotys. Jie tiesiog turi dirbti, tačiau plokščiosios rodo trimatį vaizdą.
Beje, nukreipimo puslapių fenomenas (nusileidimaspuslapis) kaip "svetainės pastato" versija - geriausias patvirtinimas, kad plokščios stačiakampės formos ir sausas, bet labai aiškus turinys taip pat yra geri ir praktiški. Tačiau reikia pastebėti, kad monopolistinių kompanijų svetainės išliko su jais: pagrindinis dalykas yra bendrovės veidas, jo funkcionalumas ir gamybos galia. Informacinių technologijų monstras nusprendė, kad nukreipimo puslapiai yra smulkaus verslo, aksesuarų, "Herbalife" ir kitų "papuošalų" veidas.
Kaip tai ar ne, iš tiesų,parodys ateitį. Svarbu, kad bet kuriame svetainės kūrimo variante būtų prasminga ne tik dažyti sluoksnių turinį, bet ir užtikrinti teisingą judėjimą tarp jų.
Puikus sprendimas yra "AJAX" (puslapis atnaujinamas, kai reikia). Dar daug žadantis sprendimas yra tada, kai puslapyje rodoma, ko reikia tam tikrame naršyklės lango taške.
Tiesą sakant, z-indeksas yra paprasta CSS taisyklė. Jo paskirtis - parodyti žymų lygį, kad naršyklė galėtų nustatyti, kada rodyti elementą ir kuri elemento dalis bus matoma. Sluoksnis ir puslapis yra labai santykinės sąvokos, nes sudėtinga kurti puslapį ir atkreipti dėmesį į z-indekso taisyklės vertes įvairiems turinio rodymo parinktims.
Paprastai kūrėjas pasirenka mėgstamą numerį ir suteikiajo visos eilutės žymos ir tie, kurie turi kažkaip išsiskirti, priskiria šį skaičių. Svetainės sluoksnių svarba ir lygiai nėra ypač pažangi ir perspektyvi praktika.
Tačiau jei perkelsite z-indekso semantiką įdialogą su lankytoju, galite sukurti praktinį efektą. Tokiu pačiu būdu, kad žymos gali persidengti, galite įklijuoti dialogus (svetainės lankytojus) ir perkelti tarp jų. Šiuo požiūriu z-indekso CSS taisyklės naudojimas yra labai pagrįstas ir praktiškas.
