Раздел 3. Работа со слоями
CSS оперирует в трёх измерениях - высота, ширина и глубина. До сих пор мы работали в двух измерениях. В этом разделе научимся создавать слои/layers. Коротко говоря - упорядочивать элементы так, чтобы они перекрывались.
Для этого необходимо присвоить каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером.
Скажем, мы располагаем карты . Наша "рука" должна быть представлена так, чтобы каждая карта имела z-index:
При этом номера идут подряд (1-5), но того же результата можно добиться и при использовании 5 различных номеров. Важна хронологическая последовательность номеров (порядок).
В качестве примера расположим картинки с зимними пейзажами следующим образом:
Задание 11_11
Style11_11.css
body {
background-color: #EAF3F9 ;
}
h1 {
color: #990000;
position: absolute;
left: 50px;
top: 50px;
z-index: 4;
}
#volk {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#ptica {
position: absolute;
left: 200px;
top: 200px;
z-index: 2;
}
#frukt {
position: absolute;
left: 300px;
top: 300px;
z-index: 3;
}
#derevo {
position: absolute;
left: 400px;
top: 400px;
z-index: 4;
}
Пример11_11.htm
<title>Пример76</title>
<link rel="stylesheet" type="text/css" href="style11_11.css" />
</head>
<body>
<h1>Зимние пейзажи</h1>
<div id="volk">
<img src="волк.jpg" alt="волк" width="300" height="250">
</div>
<div id="ptica">
<img src="птичка.jpg" alt="птица" width="300" height="250">
</div>
<div id="frukt">
<img src="фрукт.jpg" alt="фрукт" width="300" height="250">
</div>
<div id="derevo">
<img src="безмятежность.jpg" alt="безмятежность" width="300" height="250">
</div>
</body>
</html>
Задание для самостоятельного выполнения:
Создайте страницу со следующим расположением элементов
Контрольные вопросы:
Что такое боксовая модель в CSS?
Как заполнить боксовую модель элементами?
Как работать со слоями в CSS?
Назовите виды позиционирования элементов вCSS.
Рекомендуемая литература
Леонтьев Б. «Энциклопедия Web-дизайна», М. – ЗАО «Новый издательский дом», 2004г.
Тамас А. Пауэл «Web-дизайн», С-Петербург. – «БХВ-Петербург», 2004г.