Rétegek css - rétegekkel - css - cikkek katalógusa - személyes oldalak
A blokk létrehozása a CSS-ben mindig egyértelműen beállítja a paramétereket, és elhelyezi azt egy adott helyen a képernyőn. Így bármelyik blokknak két X és Y koordinátája van, amelyek meghatározzák a blokk pozícióját a képernyő síkján. De a CSS-ben van egy harmadik, térbeli koordináta Z, amely meghatározza annak a rétegnek a számát, amelyen a blokk található. Ie Minél nagyobb a Z koordináta, annál magasabb ez a réteg a többihez képest. Például a 2. számmal rendelkező réteg közelebb kerül a felhasználóhoz, mint az 1. számmal rendelkező réteg. Az 1. számmal rendelkező réteg nagyobb lesz, mint a főoldal kódja.
A CSS-réteg létrehozása megfelel a Z-index tulajdonságnak. és az értékei a réteg számát jelzik.
Például a Royal Flash kártyák híres kombinációját készítheti.
Mint látható, minden kártya átlapolódik a másikkal. Így néz ki a kód:
.desatka_buba pozíció: abszolút;
balra: 200px;
felül: 200px;
z-index: 1;
>
.valet_buba position: abszolút;
balra: 215px;
felül: 215px;
z-index: 2;
>
.dama_buba pozíció: abszolút;
balra: 230px;
top: 230px;
z-index: 3;
>
.korol_buba pozíció: abszolút;
balra: 245px;
top: 245px;
z-index: 4;
>
.tuz_bubna pozíció: abszolút;
balra: 260px;
top: 260px;
z-index: 5;
>
Nos, az html kódban. csak adja hozzá a megfelelő stílusokat a rajzokhoz, például:
Nos, és így tovább, érted.
Ha alaposan megérted ezt az egyszerű módszert, elég tisztességes dolgokat hozhatsz létre. Például helyezze a szöveget a kép felett, vagy fordítva, gyönyörű címsorokat készítsen. például az árnyék hatással, akkor is, ha alaposabban tanulmányozza a rétegeket, létrehozhat legördülő menüket. és még sok más.