Урок 15: Слои в css

Любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой находится по отношению к остальным.

За создание слоя в 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 коде , просто присваиваете рисункам соответствующие стили, типа:

<img src="10buba.gif" class="10_buba"> и так далее.

Если хорошенько разобраться с этим простым методом, можно создавать довольно приличные вещи. Например размещать текст над изображением, или наоборот, создавать красивые заголовки , например с эффектом тени, также если поглубже изучить слои, можно создавать выпадающие меню , и многое другое...

18