Створюючи блок в CSS, ми завжди чітко ставимо його параметри, а також позиціонуємо його в певне місце на екрані. Таким чином, будь-який блок має дві координати X і Y, які визначають положення блоку на площині екрану. Але в CSS є ще і третя, просторова координата Z, яка визначає номер шару, на якому знаходиться блок. Тобто чим більше координата Z, тим вище цей шар знаходиться по відношенню до решти. Наприклад шар з номером 2 буде ближче розташований до користувача, хто переглядає вашу сторінку, ніж шар з номером 1. А шар з номером 1, буде розташовуватися вище, ніж основний код сторінки.
За створення шару в CSS відповідає властивість Z-index. а прийняті ним значення, вказують номер шару.
Наприклад, можна зробити з карт знамениту комбінацію Royal Flash.
Як бачите, кожна карта, трохи перекриває іншу. Ось як це виглядає в коді:
.desatka_buba position: absolute;
left: 200px;
top: 200px;
z-index: 1;
>
.valet_buba position: absolute;
left: 215px;
top: 215px;
z-index: 2;
>
.dama_buba position: absolute;
left: 230px;
top: 230px;
z-index: 3;
>
.korol_buba position: absolute;
left: 245px;
top: 245px;
z-index: 4;
>
.tuz_bubna position: absolute;
left: 260px;
top: 260px;
z-index: 5;
>
Ну а в html коді. просто привласнюєте малюнків відповідні стилі, типу:
ну і так далі, ви зрозуміли.
Якщо гарненько розібратися з цим простим методом, можна створювати досить пристойні речі. Наприклад розміщувати текст над зображенням, або навпаки, створювати красиві заголовки. наприклад з ефектом тіні, також якщо глибше вивчити шари, можна створювати випадають меню. і багато іншого.