[CSS] Слои - что это?

Уже два дня как хочу написать этот пост, но все никак не нахожу времени... Недавно я все-таки сел и освоил (конечно на сколько смог технологию CSS - каскадные таблицы стилей). Теперь писать сайт стало еще проще, а возможностей для оформления стало еще больше... Но после того как я более глубоко познакомился с работой со слоями в рамках CSS с помощью тегов [div] и [span]. После это события я был просто в шоке...
Я давно использую при разработке страниц табличную модель (когда весь дизайн держит невидимая таблица...), что накладывало определенные ограничения и очень существенно затрудняло разработку...
А тут использовал впервые боксовую модель (когда весь дизайн состоит из блоков, расположенных по указанным дизайнером координатам и способным "всплывать" на передний план или "уходить" на задний, при этом при абсолютной адресации последовательность описания блоков в hmtl не учитавается)... Это очень просто и самое главное быстро! А главное открывает колосальные возможности для мультипликации (анимации) страниц, т.к. используя vbscript или javascript можно менять свойства блоков динамически!..

Итак чтобы создать самый простой дизайн нам потребуется:

создать HMTL-файл с кодом:
index.html

[html]
[head]
[title]Имя сайта[/title]
[link rel="stylesheet" text="text/css" href="style.css"]
[/head]
[body]
[div id="box-1"]Текст 1[/div]
[div id="box-2"]Текст 2[/div]
[/body]
[/html]

(из-за особенностей публикации в блоге все символы '<>' заменены на '[]')

Здесь у нас два блока. Первый с идентификатором 'box-1', а второй 'box-2'... Внутри них расположен в данном случае текст 'Текст'... Хотя на месте текста могут быть абсолютно любая информация и любые HTML-теги и другие блоки. Например в одном из моих сайтов в один блок "загнана" целиком форма авторизации, которая сама в свою очередь состоит из блоков...

Так вот чтобы это заработало нам понадобиться создать второй файл описания стиля:
style.css

#box-1 {
background-color: #FF0000;
width: 100px;
height: 100px;
position:absolute;
left:0px;
top: 0px;
z-index: 1;
}

#box-2 {
background-color: #0000FF;
width: 100px;
height: 100px;
position:absolute;
left:50px;
top: 50px;
z-index: 2;
}

В результате получим:

Из рисунка понятно что z-index определяет способ показа. Правило такое: Первым покажется элемент с максимальным индексом. Индекс фона (или индекс по умолчанию) равен 0. Индекс может быть и отрицательным.

Думаю этого на затравку хватит... более подробно Google вам в помощь...