CSS z-index: áttekintés, tulajdonságok

CSS szabály z-index - az oldalelem pozíciója a Z koordinátában: az elem megjelenítésének szintje vagy a réteg, amelyben található. A z-indexet tartalmazó címke teljes egészében megjelenik. A címkék a sorrendben jelennek meg a bejövő szálon és átfedésben. приоритет видимости. A z-index értéke határozza meg a láthatósági prioritást.

Meg kell tisztelni a modern böngészőket és algoritmusokat az elemek megjelenítéséhez. A grafikus rögzített képernyők és az alkalmazásablakokban lévő elemek látható és láthatatlan részeinek problémája miatt a látható tartalom megjelenítési technológiája kiváló eredményeket ért el. A böngészőablakban az összes elem helyesen jelenik meg, a felhasználó csak a tervező vagy a fejlesztő által meghatározott értékeket látja.

Általános szabály: rend és szint

A böngésző sorrendben olvassa be a bemeneti adatfolyamot (a szerver által létrehozott oldalt). Minden címke a CSS szabályoknak megfelelően jelenik meg, és átfedhet.

Ebben a példában négy látható elemet ismertetünk. Minden második blokkolja az előzőt. Olyan helyeken, ahol a címkék metszenek, a prioritás kérdése felmerül. Mivel a z-index CSS szabály mindegyik címke esetében azonos és egyenlő 848-val, a következő elem látható. Minden, ami minden egyes következő elem alatt néz ki, nyilvánvalóan.

Láthatósági szabály

A böngészők kizárólag "becsületesen" tartják a láthatóság szabályait. Olyan algoritmust kitalálhatunk, amellyel az összes ömlesztett réteget elemezhetjük és csak azokat, amelyek valóban metszenek, anélkül, hogy figyelembe vesszük azokat az oldalakat, amelyek az alábbi elemek mindegyikébe felszívódnak, nagyon nehéz.

A legtöbb esetben ez nem szükséges. A modern berendezések nagyon gyorsan működnek, és nagyon nehéz problémát észlelni az elem újratervezésével, mielőtt a következő elem felülbírálná.

Az elemek sorrendjére gyakorolt hatás

Elég, ha az scCSS3 harmadik tag növelni fogja a z-index értékét, és az scCSS4 -et - csökkenteni, ahogy az általános kép változik. Az áramlási elemek sorrendje ugyanaz marad:

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

Megjegyzendő, hogy a második kép valójában több helyet foglal el, mint amilyennek látszik. A harmadik kép is. Ezenkívül két részből áll (két tojás) egymástól távol.

A második és a harmadik képeket elfoglaló területek valós méretei sárga és szürke színnel jelennek meg.

A z-index kombinálása háttérszínnel

Meg kell jegyezni, hogy a CSS háttér- és z-index tulajdonságai kiegészítik egymást. A blokkelemek és bármely más elemek mindig egy téglalap alakú területet foglalnak el, amelyet a maximális magasság és a tartalom maximális szélessége alkot.

A képek használatával bármilyen formát megadhat az elem területére, de mindig körvonalai lesznek. Ez egy olyan tény, amelyet fontos figyelembe venni.

Szöveget elhelyezhet a kijelölt alakzat körvonala mentén, de ha nem, a tartalom bármelyik elemhez tartozik, mint egy téglalap alakú mezőben, egymás után, ahogyan az a bemeneti adatfolyamból származik.

A z-index CSS tulajdonságának használata egy olyan elemen, amelynek háttérszín átlátszó (egyfajta átlátszóság) lehetővé teszi az elemek bármely körvonalának emulálását. Bár minden esetben a valóságban az elem négyszögletes lesz.

Események és elemek láthatósága

Olyan helyeken, ahol az elemet blokkolja egy másik elem, az események nem működnek. Általános szabályként, ha az elem látszólagos, akkor is a tartományon kívül esik.

Ha a fejlesztő egy gombot vagy egy menüpontot szeretne bezárni, könnyen elhelyezhet egy másik címkét a blokkolt címke felett, esetleg átlátszó (például a CSS opacitás szabály használatával), de mindenképpen magasabb CSS z-indexrel.

Mivel az események a felhasználó szemszögéből értelmezhetőek és nincsenek ilyenek, az utóbbiak (egérmozgás, véletlen billentyűs billentyű megnyomásával, időzítő jel) használhatók a böngészőablak tartalmának megfelelő módosításához.

Egyszerű példa: a látogató áthelyezte az egérmutatót a menüpontra, de még nem hozott döntést semmiben. A fejlesztő előre láthatta ezt az eseményt, nyomon követheti a mozgást a párbeszéd kívánt pontjára (kattintson - a látogató meghozza a döntést) és megjelenítsen megfelelő tartalmat. A CSS z-index szabály jobban működik ebben az esetben.

Képformátum

Mivel a képek a webhely bármely fontos építőanyaga (a szépség, a modernitás, a funkcionalitás már ismerős a dolgok), nagyon fontos a képformátum kiválasztása.

Összességében a meglévő formátumok sokféleségét használhatja, de a gyakorlatiasság és a hatékonyság szempontjából célszerű korlátozni magát a * .png statikus képekhez és * .gif animációs képekhez. A népszerű * .jpg is jó, de nem teszi lehetővé a megjelenítési terület rugalmas manipulálását.

Böngésző és fejlesztői hibák

Nem gyakran a CSS z-index nem működik, de ez megtörténik. A lépcsőzetes stílustábla szabályai mindig működnek, és a stílusfájl mennyisége gyakran jelentős mennyiségeket ér el. Ha valami nem jelenik meg, vagy egyszerűen nincs mit kell lennie, először ellenőriznie kell saját kódját, majd törölnie kell a böngésző gyorsítótárát, és ellenőriznie kell saját kódját.

A HTML és a CSS értelmezése miatt a böngésző szinte nem hibázik - ez egy axióma. Ha a kívánt elem nincs jelen, akkor azt jelenti, hogy a CSS konstrukcióban {pozíció: abszolút; Z-index: 112233; Balra: 10px; Top: 20px; ...} valami hiányzik vagy rosszul tévesztett.

A leggyakoribb hiba - az elem koordinátái nem megfelelőek, a láthatóságának jelzése, az abszolút vagy a relatív pozíció hiányzik. Néha a stílust közvetlenül az elemen lehet megadni, nem pedig stílusában. Az utóbbi esetben ez a kiút a helyzetből, de ez elsősorban valamilyen hibát jelez a kódban.

A stílust az osztály vagy az azonosító stílusában kell megadni. Adja meg az elemen lévő stílust csak kivételes esetekben.

A jQuery.css (z-index, 123) használata hibát eredményezhet, ha rossz osztályra vagy azonosítóra vonatkozik. Ezen felül a jQuery egy igazán nagyszerű fejlesztői eszköz. Mindazonáltal, mielőtt alkalmazná, nem fáj a gondolkodásra: nem lehet rögtönzött HTML / CSS-sel foglalkozni, a z-index nem olyan szabály, amely nem igényel szoros figyelmet.

Helyes rétegek és logikus mozgás

Az ideális lap lapos. Mindenesetre messze nem egy valós méretű kép tömegarányban, és erre nincs különösebb szükség. A modern helyszínek valóságos gyakorlatok, valódi feladatok. Csak munkára van szükségük, de laposak háromdimenziós képet mutatnak.

By the way, a céloldalon megjelenő jelenség "helyszíni" változat formájában a legjobb megerősítés, hogy a lapos téglalap alakú és a száraz, de rendkívül tiszta tartalom is jó és praktikus. De meg kell jegyezni, hogy a monopóliumok helyszínei továbbra is a sajátjuk maradtak: a legfontosabb a vállalat személye, funkcionalitása és termelési kapacitása. Az informatika szörnyei úgy találták, hogy a céloldalak - ez a kisvállalkozások, a kiegészítők, a herbalife és más "ékszerek" arca.

Tehát vagy nem, hiszen valójában helyes, a jövő megmutatja. Fontos, hogy a weboldal bármely verziójával nemcsak a tartalom rétegeinek festésére, hanem a helyes mozgás biztosítására is van értelme.

A tökéletes megoldás az AJAX (az oldal szükség szerint frissül). Még ígéretes megoldás, amikor az oldal megmutatja, hogy mi szükséges egy adott ponton a böngészőablakban.

Valójában a z-index egy egyszerű CSS-szabály. Célja, hogy megmutassa a címke szintjét, hogy a böngésző meg tudja határozni, hogy mikor jelenjen meg az elem és melyik része jelenjen meg. A réteg és az oldal nagyon viszonylagos fogalmak, mert problémát jelent az oldal fejlesztése, és a különböző tartalom megjelenítési lehetőségekre vonatkozó z-index szabály értékeinek figyelembevétele.

Általában a fejlesztő választja ki a kedvenc számot, és adjon hozzá egy sorban lévő összes címkéhez, és azoknak, akiknek valamilyen módon ki kell állniuk, hozzárendeljék a következő számot. A rétegek és az oldalak fontossága nem különösebben progresszív és ígéretes gyakorlat.

Ha azonban a látogatóval áthelyezi a z-index szemantikáját a párbeszédterületre, gyakorlati hatásokat hozhat létre. Ahogyan a címkék átfedhetnek, átfedheti a párbeszédablakokat (webhely-látogató), és elvégezheti a közöttük lévő mozgást. Ebből a szempontból a CSS z-index szabály alkalmazása nagyon gyakorlatias és praktikusnak tűnik.