Сейчас мы разберемся со слоями в CSS. Если вы работали с графическими редакторами, то понятие «слои» вам будет не новым, если же нет, то попробую объяснить.

Когда мы создаем блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Получается, что любой блок у нас имеет две координаты X и Y, определяющие положение блока на плоскости экрана. Но в CSS имеется еще третья координата Z, она определяет номер слоя, на котором располагается объект. Выходит, что чем больше координата Z, тем выше этот слой находится по отношению к остальным. К примеру, слой с номером 2 будет ближе расположен к пользователю, который просмотрит вашу страницу, чем слой с номером 1. А слой с номером 1, будет расположен выше, чем основной код страницы.

За создание такого слоя в CSS отвечает свойство Z-index, а принимаемые им значения, указывают номер слоя.

Давайте на примере попробуем создать комбинацию Royal Flash.

Когда каждая карта перекрывает другую, это будет выглядеть так:

.desatka_buba {
position: absolute;
left: 400px;
top: 400px;
z-index: 1;
}
.valet_buba {
position: absolute;
left: 415px;
top: 415px;
z-index: 2;
}
.dama_buba {
position: absolute;
left: 430px;
top: 430px;
z-index: 3;
}
.korol_buba {
position: absolute;
left: 445px;
top: 445px;
z-index: 4;
}
.tuz_bubna {
position: absolute;
left: 460px;
top: 460px;
z-index: 5;
}

Ну а в html коде , просто присваиваете рисункам соответствующие стили, типа:
<img src="10buba.gif" class="10_buba"> ну и так далее, вы поняли…

В этом нет ничего сложного, но урок интересный.

Не забывайте повторять пройденный материл и больше уделяйте время практике. Учебник закончился, но я дам вам еще пару советов.