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

CSS szabály z-index - az oldalelem helyzetea Z koordinátán: az elem kijelzőjé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 átfedik egymást. A z-index értéke határozza meg láthatósági prioritás.

Meg kell tisztelni a modern böngészőket ésalgoritmusok megjelenítéséhez elemekkel. Mivel a nap, amikor grafika és elfogott képernyők kialakítva nyírás probléma látható és láthatatlan részei az elemek az alkalmazás ablak, a látható kijelző technológia tartalom elérte a kiváló eredményeket. A böngésző ablak minden elem helyesen jelennek meg, a felhasználó látja, csak a mi speciális tervezésű vagy fejlesztő.

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

A böngészőt a bemeneti adatfolyam (a szerver által létrehozott oldal) a böngésző sorrendben olvassa le. Minden címke a CSS-szabályok szerint 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, felmerül a prioritás kérdése. 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 betartják a láthatóság szabályaitcsak a "fair". Ahhoz, hogy dolgozzon ki egy olyan algoritmus, amely lehetővé teszi, hogy elemezze a bruttó kivetését és csak azokat, amelyek ténylegesen metszik egymást, kivéve azokat a részeket, amelyek felszívódnak az egymást követő elem - nagyon nehéz.

A legtöbb esetben ez nem szükséges. A modern felszerelés nagyon gyorsan működik, é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 a harmadik scCSS3 címke z-indexének értékét növeljük, és csökkentjük az scCSS4-hez - hogyan változik az általános kép. Ebben az esetben a következő elemek sorrendje ugyanaz marad:

• div id ="ScCSS1";
• div id ="ScCSS2";
• div id ="ScCSS3";
• div id ="ScCSS4".

Meg kell jegyezni, hogy a másodika 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ép által elfoglalt területek valós méretét sárga és szürke színnel jelölik.

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

Ne feledje, hogy a CSS tulajdonságaiháttér & z-index kiegészítik egymást. Minden blokk elem, és bármely más, mindig egy téglalap alakú területet foglal magában, amelyet a tartalom maximális magassága és maximális szélessége képez.

A képek használatával bármilyen alakzatot adhat az elemek területéhez, de mindig körvonalai lesznek. Ez egy olyan tény, amelyet fontos fontolóra venni.

A szöveget a kijelölt kontúrra helyezhetiszámokat, de ha ez nem történik meg, a tartalom bármelyik elemhez tartozik, mint egy téglalap alakú mezőben, és egymás után, ahogyan a bemeneti adatfolyamból érkezik.

Elemben a z-index CSS-tulajdonság használataamely a háttérszín átlátszó (egyfajta átlátszóság) lehetővé teszi, hogy bármilyen elem vázlatot emuláljon. Bár minden esetben, a valóságban az elem négyszögletes lesz.

Elem események és láthatóság

Olyan helyeken, ahol az elemet blokkolja egy másik elem, az események nem fognak működni rajta. Általános szabályként, ha a tétel nem látható, akkor is elérhető.

Ha a fejlesztő a gombot vagy a gombot le akarja zárniegy menüelem, helyet adhat egy másik tagnak a blokkoló címke fölé, esetleg átlátszóra (például a CSS opacitási szabály használatával), de mindenesetre magasabb CSS z-indexrel.

Mivel a események a felhasználó pontszemszögből értelmezhető, és nem létezik ilyen, az utóbbi (az egér mozgatása, véletlen megnyomása a billentyűzeten lévő gombon, időzítő jel) a böngészőablak tartalmának megfelelő megváltoztatására használható.

Egyszerű példa: A látogató áthelyezte az egérmutatót a menüpontra, de még nem döntött úgy, hogy bármit is tenne. A fejlesztő biztosíthatja ezt az eseményt, nyomon követheti a mozgást a kívánt pontra (kattintson - a látogató döntést hoz) és megjeleníti a megfelelő tartalmat. A CSS z-index szabály tökéletesen illik ehhez.

Képformátum

Mivel a képek fontosaképítőanyag minden helyszínen (szépség, modernitás, funkcionalitás - a dolgok szokásos normái), a képek formátumának megválasztása nagyon fontos.

Nagyjából mindenki használhatjaa létező formátumok sokasága, de a praktikusság és a hatékonyság szempontjából meglehetősen indokolt a statikus képek és a * .gif animációval ellátott képek. A népszerű * .jpg is jó, de nem teszi lehetővé a megjelenítési terület rugalmasságát.

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

Nem olyan gyakran alakul ki a CSSA z-index nem működik, de ez megtörténik. A lépcsős stíluslap szabályok mindig működnek, és a stílusfájl mérete gyakran eléri jelentős összegeket. Ha valami baj van, vagy egyszerűen nincs semmi, akkor először ellenőrizni 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 CSS értelmezése szinte a böngészőhibák elkövetése axióma. Ha nincs szükség elemre, akkor azt jelenti, hogy a CSS konstrukcióban {pozíció: abszolút; z-index: 112233; balra: 10px; top: 20px; ...} valami hiányzik vagy írt rosszul.

A leggyakoribb hiba helytelenül van megadva.az elem koordinátái, kimutatható láthatósága, abszolút vagy relatív pozíciója. Néha előfordulhat, hogy a stílust közvetlenül az elemen, és nem az ő stílusában mutatják. Az utóbbi esetben ez a kiút a helyzetből, de ez elsősorban valamilyen hibáról beszél a kódban.

A stílust az osztály vagy az azonosító stílusában kell megadni. A stílust csak a kivételes esetekben kell feltüntetni az elemen.

A jQuery használata.A css (z-index, 123) hibához is vezethet, ha rossz osztályba vagy azonosítóba kerül. Emellett a jQuery egy igazán nagy fejlesztői eszköz. Ennek alkalmazása előtt azonban nem árt gondolni: lehetséges-e a HTML / CSS improvizált eszközökkel, a z-index nem olyan szabály, amely nem igényel szoros figyelmet.

Helyes rétegek és logikai mozgás

A tökéletes oldal lapos. Mindenesetre ez messze nem egy hatalmas térfogatú kép nagyméretű, és nincs különleges szükséglet. A modern weboldalak valódi gyakorlat, valós feladatok. Csak dolgozniuk kell, de a laposak háromdimenziós képet mutatnak.

By the way, a jelenség a céloldalak (leszállásoldal) „helyszínépítés” változat formájában - a legjobb igazolás, hogy a lapos téglalap alakú és száraz, de rendkívül világos tartalom is jó és praktikus. De meg kell jegyezni, hogy a monopolisztikus cégek helyszínei a következők voltak: a fő dolog - a vállalat arca, funkcionalitása és termelési teljesítménye. Az informatikai szörnyek úgy vélték, hogy a nyitóoldalak a kisvállalkozások, a tartozékok, a Herbalife és más „ékszerek” arca.

Tényleg tetszik, vagy nem,megmutatja a jövőt. Fontos, hogy a helyszín építésének bármely változatában ésszerű legyen ne csak a rétegek rétegezését, hanem a közöttük lévő megfelelő mozgás biztosítását is.

Kiváló megoldás az AJAX (az oldal szükség szerint frissül). Még egy ígéretesebb megoldás az, ha az oldal megmutatja, hogy mi szükséges a böngészőablak adott pontján.

Valójában az z-index egy egyszerű CSS szabály. Célja a címke szintjének megjelenítése, hogy a böngésző meghatározhassa, hogy mikor kell megjeleníteni az elemet, és az elem melyik része látható lesz. A réteg és az oldal nagyon relatív fogalmak, mivel problémás az oldal megtervezése és a z-index szabály értékeinek figyelembevétele a különböző tartalmi megjelenítési opciók esetében.

Általában a fejlesztő kiválaszt egy kedvenc számot és megadjaaz összes címke egy sorban, és azok, akiknek valahogy ki kell állniuk, hozzárendelik a következő számot. Az oldalrétegek és -szintek fontossága nem különösebben progresszív és ígéretes gyakorlat.

Ha azonban a z-index szemantikát átadjapárbeszédet a látogatóval, gyakorlati hatást hozhat létre. Ugyanígy, ahogy a címkék átfedhetnek egymással, átfedhetik a párbeszédpaneleket (webhely látogató) és léphetnek közöttük. Ebből a szempontból a z-index CSS szabály használata nagyon ésszerű és praktikus.