Z - INDEX 005
Az absolute pozícionálás, és a z-index
Az abszolút (absolute) pozícionálással megtehetjük, hogy a szövegfolyamban megírt (elhelyezett), tetszőleges jelölőelemmel határolt területeket, tetszőleges helyen jelenítsük meg weboldalunkon.
Akár, egymás fölé is helyezhetjük őket.
De mi értelme, két címsort egy adott területre pozícionálni, ekkor csak az egyik lesz olvasható.
A címsoroknak, olyan tartalommal kell rendelkezni, mely az őt követő dokumentum anyagára vonatkozik.
Az abszolút (absolute) pozícionálást, legfőképpen div szakaszokra alkalmazzuk.
Ezen div szakaszokat, sokan doboz, box, stb. elnevezésként említik, mely a kezdő weblapkészítőket sokszor megtéveszti. A doboz és box kifejezés nem más, mint a div szakasznak adott azonosító név, és természetesen mindenki tetszésének megfelelő azonosítót adhat a div szakszoknak.
Első rész:
A div szakasz, z-index értékének, és abszolút pozícionálásának teszteléséhez szükségünk lesz:
- Három div szakaszra. (A tartalmuk bármi lehet: Szöveg, kép, stb.)
- CSS, azaz stílus fájlra
Pozícionálás nélkül:
- A div szakaszok (doboz, box), olyan sorrendben jelennek meg, amiyen sorrendben azokat beírtuk a szövegfolyamba.
- Nem fedik egymást, egymás alatt helyezkednek el.
1. div
2. div
3. div
1. div szakasz<div id="box_1"><p> 1.</p> </div> |
2. div szakasz<div id="box_2"><p> 2.</p> </div> |
3. div szakasz<div id="box_3"><p> 3.</p> </div> |
|
#box_1{ background-color: aqua; border: solid 1px #FF0000; width: 100px; height: 50px; } |
#box_2{ background-color: orange; border: solid 1px #FF0000; width: 100px; height: 50px; } |
#box_3{ background-color: lime; border: solid 1px #FF0000; width: 100px; height: 50px; } |
Második példa
Pozíciónáljuk a div szakaszokat.
A div szakaszok stílusának meghatározása: position: absolute.
- A div szakaszok, azaz dobozok pontos helyét, mi határozzuk meg.
- Eredmény lépcsőszerű elhelyezkedés.
- A div szakaszok, azaz dobozok közül, a szövegfolyamban utoljára beírt, került legfelülre, azaz teljes tartalma látható!
1. div, absolute
2. div, absolute
3. div, absolute
1. div szakasz<div id="box_11"><p> 11.</p> </div> |
2. div szakasz<div id="box_22"><p> 22.</p> </div> |
3. div szakasz<div id="box_33"><p> 33.</p> </div> |
Stílusa#box_11{position: absolute; top: 0px; left: 0px; background-color: aqua; border: solid 1px #FF0000; width: 100px; height: 50px; } | Stílusa#box_22{position: absolute; top: 25px; left: 10px; background-color: orange; border: solid 1px #FF0000; width: 100px; height: 50px; } | Stílusa#box_33{position: absolute; top: 50px; left: 20px; background-color: lime; border: solid 1px #FF0000; width: 100px; height: 50px; } |
Harmadik rész
Következő példában, csak a harmadik div szakasznak (div id="box_033") adunk, z-index tulajdonságot: z-index: 0;
Most, nem történt semmi, mert a box_033 azonosítóval rendelkező div szakasznak adtunk z-index értéket.
Oka:
- Minden div szakasznak, alapbeállítás szerint, z-indexe: 0;
- Hiába adtunk e div szakasz, vagy bármelyik másik div szakasz z-indexének "0" értéket, nem történt semmi, mert az, a többi div szakasz z-index értékével megegyező.
- A div szakasz szövegfolyamba beírt helye fogja megszabni, hól helyezkedik el.
11.
22.
033, z-index: 0;
1. div szakasz<div id="box_11"><p> 11.</p> </div> |
2. div szakasz<div id="box_22"><p> 22.</p> </div> |
3. div szakasz<div id="box_033"><p> 033.</p> </div> |
Stílusa#box_11{position: absolute; top: 0px; left: 0px; background-color: aqua; border: solid 1px #FF0000; width: 100px; height: 50px; } | Stílusa#box_22{position: absolute; top: 25px; left: 10px; background-color: orange; border: solid 1px #FF0000; width: 100px; height: 50px; } | Stílusa#box_033{position: absolute; top: 50px; left: 20px; background-color: lime; border: solid 1px #FF0000; width: 100px; height: 50px; z-index: 0; } |
Negyedik rész
Adjunk az 1-es és 2-es div szakasznak, azaz doboznak, 0-tól nagyobb z-index értéket.
A harmadik div szakasz, azaz doboz z-index értéke "0" ezért alulra kerül.
Az első és második div szakasz, azaz doboz z-index értéke "1". Mivel értékük megegyezik, ezért még mindig a szövegfolyamba beírt sorrendben jelennek meg.
1. z-index: 1;
2. z-index: 1;
3. z-index: 0;
1. div szakasz<div id="box_1111"><p> 1111.</p> </div> |
2. div szakasz<div id="box_2222"><p> 2222.</p> </div> |
3. div szakasz<div id="box_3333"><p> 3333.</p> </div> |
Stílusa#box_1111{position: absolute; top: 0px; left: 0px; background-color: aqua; border: solid 1px #FF0000; width: 100px; height: 50px; z-index: 1; } | Stílusa#box_2222{position: absolute; top: 25px; left: 10px; background-color: orange; border: solid 1px #FF0000; width: 100px; height: 50px; z-index: 1; } | Stílusa#box_3333{position: absolute; top: 50px; left: 20px; background-color: lime; border: solid 1px #FF0000; width: 100px; height: 50px; z-index: 0; } |
Ötödik rész
Példánkban, az első div szakasz kapja a legnagyobb z-index értéket: z-index: 2;
- A div szakaszok sorrendje teljesen megváltozott.
- A div szakaszok, ellenkező sorrendben jelennek meg, mint azt, a szövegfolyamban megírtuk.
- Minnél nagyobb a div szaksz z-index értéke, annál magasabban, azaz, a nálánál kisebb z-index értékkel rendelkezők felett helyezkedik el.
1. z-index: 2;
2. z-index: 1;
3. z-index: 0;
1. div szakasz<div id="box_0011"><p> 0011.</p> </div> |
2. div szakasz<div id="box_2222"><p> 2222.</p> </div> |
3. div szakasz<div id="box_3333"><p> 3333.</p> </div> |
Stílusa#box_0011{position: absolute; top: 0px; left: 0px; background-color: aqua; border: solid 1px #FF0000; width: 100px; height: 50px; z-index: 2; } | Stílusa#box_2222{position: absolute; top: 25px; left: 10px; background-color: orange; border: solid 1px #FF0000; width: 100px; height: 50px; z-index: 1; } | Stílusa#box_3333{position: absolute; top: 50px; left: 20px; background-color: lime; border: solid 1px #FF0000; width: 100px; height: 50px; z-index: 0; } |
Hatodik rész
Pozícionáljuk másként a div szakaszokat.
Ebben az esetben is, a kisebb z-index értékű div kerül alulra, és a nagyobbik z-index értékű felülre.
z-index: 2;
z-index: 1;
z-index: 0;