При создание блока в CSS мы позиционируем его в определенном месте экрана.Таким образом блок описывается координатами x и y.А в CSS присутствует так же третья координата z. Данная координата определяет номер слоя и чем больше номер слоя, тем выше он находится по отношению к остальным слоям.
За размещение слоя относительно других слоев отвечает свойство z-index
z-index:1
z-index:2
z-index:3
z-index:4
Как сделано:
1)Открываем блокнот и записываем следующее:
#karta1{position:absolute;left:313px;top:425px;
width:120px;height:160px;z-index:1;background:red;}
#karta2{position:absolute;left:397px;top:456px;
width:120px;height:160px;z-index:2;background:red;}
#karta3{position:absolute;left:507px;top:456px;
width:120px;height:160px;z-index:4;background:red;}
#karta4{
position:absolute;
left:587px;
top:429px;
width:120px;
height:160px;
z-index:3;
background:red;
}
2)Сохраняем в папку styles с именем "karta.css".
3)Записываем ссылку в контейнер <head>:
<link rel="stylesheet" type="text/css" href="styles/karta.css" />
Рассмотрим пример создания макета страницы.
Наша страница будет состоять из трех блоков: заголовок,меню и содержание .
| ЗАГОЛОВОК | |
|---|---|
| МЕНЮ | СОДЕРЖАНИЕ |
#page { width:50%; background:;margin-left: 25%; }
#header { background:#A2A2A2; width:100%; height:100px; }
#menu { background:#8CFF40; width:25%;height:100%; }
#content { background:#FFFFFF; width:75%;height:100%; float:right; }
(margin-left—добавляется отступ слева;
float:right–выравнивает слой по правому краю)
2)Сохраняем в папку styles с именем page.css
3)Записываем ссылку в контейнер <head>:
<link rel="stylesheet" type="text/css" href="styles/page.css" />
4)Пишим текст в контейнер <body>:
<div id="page">
<div id="header">ЗАГОЛОВОК</div>
<div id="content">СОДЕРЖАНИЕ</div>
<div id="menu">МЕНЮ</div>
</div>
