Слои в CSS. Координата Z.



Работа со слоями многим знакома при использовании графического редактора Adobe Photoshop. Условно каждый элемент имеет координаты X и Y. Но в CSS используют еще одну координату Z, которая позволяет элементам накладываться друг на друга. Что мы понимаем под словом слои? Возьмите несколько листов бумаги и наложите их друг на друга - так выглядят слои. Чем выше слой, тем больше координата. За создание слоя в CSS отвечает свойство Z-index.

Каждый слой немного перекрывает другой.

Пример записи кода:

.sloi_red { position: absolute; left: 200px; top: 200px; z-index: 1; } .sloi_orange { position: absolute; left: 215px; top: 215px; z-index: 2; } .sloi_yellow { position: absolute; left: 230px; top: 230px; z-index: 3; } .sloi_green { position: absolute; left: 245px; top: 245px; z-index: 4; } .sloi_blue { position: absolute; left: 260px; top: 260px; z-index: 5; } .sloi_dark_blue { position: absolute; left: 275px; top: 275px; z-index: 6; } .sloi_violet { position: absolute; left: 290px; top: 290px; z-index: 7; }

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


В HTML коде каждому рисунку присваиваем соответствующий стиль. Пример <img src="sloi_red.png" class="sloi_red">.

По умолчанию свойству z-index присваивается значение auto или 0. Z-index применяется к элементам для которых установлено свойство position со значением absolute, fixed или relative.

С помощью этого метода можно создавать красивые заголовки, располагать текст над изображением, создавать выпадающие меню и многое другое...

Далее рассмотрим: Атрибуты cellpadding и cellspacing