CSS z-indeks: 'n oorsig, eienskappe

Heers CSS z-indeks - bladsy element posisie koördineer Z: die vlak van die vertoning element of laag waarin dit geleë is. Tag dat z-indeks groter het sal vertoon word in vol. Tags vertoon in die volgorde waarin hulle verskyn in die inkomende vloei en oorvleuel. приоритет видимости. Z-indeks waarde bepaal die sigbaarheid prioriteit.

Ons moet hulde bring aan die moderne blaaiers en algoritmes vertoon elemente. Sedert die dae toe grafiese en vasgevang skerms gevorm knip probleem sigbare en onsigbare dele van die elemente in die venster aansoek, het die sigbare vertoning tegnologie inhoud uitstekende resultate bereik. In 'n venster, is al die elemente korrek vertoon, die gebruiker sien net wat gespesifiseerde ontwerp of ontwikkelaar.

Die algemene reël: die orde en die vlak van

Die insette stroom (bladsy gevorm bediener) agtermekaar lees die leser. Alle tags vertoon in ooreenstemming met die CSS reëls en mag oorvleuel.

Hierdie voorbeeld beskryf vier sigbare element. Elke opeenvolgende oorvleuel 'n vorige een. In plekke waar die etikette gekruis, daar is 'n kwessie van prioriteit. As 'n reël z-indeks CSS tags for al hierdie dieselfde en gelyk aan 848, sal dit duidelik wees dat element wat gaan soos volg. Al wat loer uit onder elk van die volgende element, blykbaar.

reël sigbaarheid

Browsers waarneem die reëls van sigbaarheid net "billike". Om vorendag te kom met 'n algoritme wat jou toelaat om al die bruto oplegging ontleed en te gebruik slegs diegene wat werklik sny, uitgesluit dié dele wat geabsorbeer word deur elke opeenvolgende element - is baie moeilik.

In die meeste gevalle is dit nie nodig nie. Moderne toerusting is baie vinnig, en let teken element tot die punt waar dit die volgende element sal blok, is baie problematies.

Invloed op die element verskeidenheid

Dit is voldoende om die derde tag scCSS3 verhoog die z-indeks, en by scCSS4 - om dit te verminder, is die totale prentjie verander. Die volgorde van elemente in die stroom bly dieselfde:

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

Dit sal opgemerk word dat die tweede foto is eintlik neem meer ruimte as wat dit lyk. Die derde foto is dieselfde. Verder is dit bestaan uit twee dele (twee eiers) op 'n afstand van mekaar.

Die werklike grootte van die streke wat die tweede en derde beelde beset word uitgelig in geel en grys onderskeidelik.

Die kombinasie van Z-indeks vir agtergrond-kleur

Dit sal opgemerk word dat die eienskappe van CSS agtergrond & Z-indeks mekaar aanvul. Alle blok-vlak elemente, en niemand anders nie, altyd beset 'n reghoekige gebied wat gevorm word deur die maksimum hoogte en die maksimum wydte van die inhoud.

Die gebruik van beelde, kan jy enige vorm veld element maak, maar om hom daar altyd 'n reghoek sal wees. Dit is 'n feit dat dit belangrik is om behoorlik in ag neem.

Jy kan teks te plaas op 'n pad gekies vorm, maar as jy dit nie doen nie, die inhoud kry om enige element in 'n reghoekige boks, agter, by ontvangs van die insette.

Gebruik eienskappe CSS z-indeks in die element waarvan die agtergrond-kleur waarde is deursigtig ( 'n soort van deursigtigheid), kan enige kring element navolg. Hoewel in elk geval in werklikheid element is reghoekig.

Gebeure en sigbare elemente

In plekke waar die element is geblokkeer deur 'n ander element, die gebeure dit sal nie werk nie. As 'n algemene reël, indien die item is buite sig, hy is ook die beskikbaarheid sone.

As 'n ontwikkelaar wil die knoppie of kieslys item sluit, is dit dalk goed wees oor die sluiting tag geplaas 'n ander tag, miskien 'n deursigtige (bv, die gebruik van die oppergesag van die CSS ondeursigtigheid), maar in elk geval, met 'n hoër CSS z-indeks.

Sedert die geval, vanaf die gebruiker oogpunt, kan verdeel word in toepaslike en nie enige nie, dan is die laaste (die verskuiwing van die muis, druk ewekansige knoppies op die sleutelbord, die timer sein) kan gebruik word om die inhoud in die venster voldoende verander.

'N Eenvoudige voorbeeld: 'n besoeker het verhuis die muis op die menu-item, maar het nog nie besluit om iets te doen. Die ontwikkelaar kan 'n gebeurtenis om die beweging van dialoog om die verlangde punt te spoor verskaf (klik - 'n besoeker besluit) en 'n voldoende inhoud te vertoon. Reël CSS z-indeks is die beste geskik is vir die geleentheid.

foto-formaat

Sedert beelde is 'n belangrike boumateriaal vir 'n webwerf (skoonheid, moderniteit, funksie - is die gewone norm van dinge), dit is van groot belang vir die beeld formaat keuses.

Deur en groot, kan jy al die verskeidenheid van bestaande strukture gebruik, maar in terme van praktiese en doeltreffendheid is baie redelik om te beperk * png vir statiese beelde en * Gif - vir geanimeerde prente. Gewilde * .jpg is ook goed, maar dit nie toelaat dat die buigsaamheid om die vertoning ruimte te manipuleer.

Leser foute en die ontwikkelaar

Nie so dikwels die geval is, wanneer die CSS z-indeks nie werk nie, maar dit gebeur. Terme van Cascading Style Sheets altyd werk, en die volume van styl lêer bereik dikwels beduidende volumes. Wanneer iets nie vertoon word, of net eenvoudig nie wat moet wees, moet eers seker jou eie kode, dan skoon te maak jou browser cache en toets jou eie kode weer.

Interpretasie van HTML en CSS, die leser is byna nie foute te maak - dit is 'n aksioma. As die gewenste item nie, dan, in die ontwerp van CSS {posisie: absolute; z-indeks: 112233; links: 10px; top: 20px; } ... iets ontbreek of nie aangeteken.

Die mees algemene fout - verkeerd Getoon element ontbreek 'n verwysing na sy sigbaarheid op 'n absolute of relatiewe posisie. Soms is dit kan werk om die styl direk op die element spesifiseer en nie sy styl. In die laasgenoemde geval, dit is 'n uitweg, maar dit is hoofsaaklik praat oor 'n soort van fout in die kode.

Styl moet wees in die klas of ID styl. Wys styl op die element moet slegs in uitsonderlike gevalle.

Die gebruik van jQuery.css (Z-indeks, 123) kan ook lei tot 'n fout, indien nie van toepassing op die klas of identifikasie. Daarbenewens, jQuery - 'n merkwaardige ontwikkeling hulpmiddel. Maar, voordat jy dit toepas, nie seer om te dink: is dit moontlik om wegdoen met geïmproviseerde beteken HTML / CSS, z-indeks - is nie 'n reël wat nie onmiddellike aandag verg.

Korrekte beweging van die logiese lae, en

Perfect Page - plat. In elk geval, voor die werklike driedimensionele beeld in die verre 'n massiewe skaal, en nie in hierdie spesifieke behoefte. Moderne webtuistes - dit is 'n ware ervaring, werklike wêreld take. Hulle het net nodig om goed te werk en wys 'n plat beeld drie-dimensioneel.

By the way, die verskynsel van die landing page (landing page) in die vorm van opsies "site gebou" - die beste bewys dat die plat reghoekige vorm en droog, maar uiters akkurate inhoud - ook 'n goeie en praktiese. Maar dit moet op gelet word dat die webwerwe van die monopolie maatskappye vas om hul die belangrikste ding - die gesig van die maatskappy, sy funksies en krag produksie. Inligtingstegnologie Monsters gevoel dat bestemming bladsye - dit is klein besighede in die gesig staar, bykomstighede, Herbalife en ander "juweliersware."

Soos dit of nie, in werklikheid korrek is, sal die toekoms wys. Dit is belangrik dat nie net sinvol om te verf in lae inhoud, maar ook om behoorlike beweging tussen hulle te eniger variant van die bou van 'n webwerf te verseker.

Uitstekende oplossing - AJAX (bladsy is opgedateer soos nodig). Selfs meer belowend oplossing, wanneer die bladsy toon dat dit nodig is op hierdie punt van die venster.

Trouens, z-indeks - hierdie eenvoudige reël CSS. Die doel - om die vlak van die etiket te wys sodat die leser kan bepaal wanneer die vertoning element en wat deel van hierdie element sigbaar sal wees. Laag en die bladsy - 'n baie relatiewe begrip, want dit is problematies om die bladsy te ontwerp en in gedagte hou die betekenis van artikel Z-indeks vir verskillende inhoud vertoon.

Tipies, 'n ontwikkelaar kies 'n gunsteling nommer, en gee dit aan alle tags in 'n ry, en die feit dat ons moet een of ander manier uitstaan, ken die volgende nommer. Heg waarde aan die lae en vlakke van bladsye - is nie besonder progressiewe en belowende praktyke.

Maar, as die skuif semantiek z-indeks om 'n dialoog met die besoeker, is dit moontlik om 'n praktiese effek te skep. Soortgelyk aan hoe tags kan bo-op mekaar, is dit moontlik om 'n dialoog (site besoeker) lê en uit te voer beweging tussen hulle. Vanuit hierdie perspektief, lyk die toepassing van die reëls van CSS z-indeks baie haalbaar en prakties te wees.