Войти
s-lub » Учебники » CSS » Слои в CSS

Слои в CSS

Слои в CSS

Вот и пришло время последнего основного свойства CSS, из тех которые мы рассмотрели в предыдущих статьях. Слои в CSS задаются с помощью свойства Z-index, а значение будет номер слоя, работать они будут относительно друг друга.

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

Это значительно расширяет возможности реализовать ваши дизайнерские фантазии, но на практике чаще всего оно используется для создания меню, кстати именно с помощью него и создаётся выпадающее меню.

Пример использования:

HTML:
<img src=" desatka.gif" class=" desatka ">
<img src=" valet.gif" class="valet ">
<img src=" dama.gif" class="dama ">
<img src=" korol.gif" class="korol ">
<img src=" tuz.gif" class="tuz ">

CSS:
.desatka { position: absolute; left: 200px; top: 200px; z-index: 1;}
.valet { position: absolute; left: 215px; top: 215px; z-index: 2; }
.dama { position: absolute; left: 230px; top: 230px; z-index: 3; }
.korol { position: absolute; left: 245px; top: 245px; z-index: 4; }
.tuz { position: absolute; left: 260px; top: 260px; z-index: 5; }