2.7.1 Порядок наложения и область видимости
Абсолютное и относительное позиционирование блоков позволяет придать странице третье измерение. Координаты блока, а точнее, левого верхнего угла прямоугольника блока, и его линейные размеры определяют местоположение блока на плоскости. Поскольку блок не является абстрактной точкой, прямоугольники блоков перекрываются. Причем в определенном порядке, что позволяет говорить об их размещении в пространстве. Порядок наложения (перекрытия) блоков определяется атрибутом z-index.
Вообще, при позиционировании блоков и их наложении друг на друга возникают видимые и невидимые области блоков. CSS позволяет управлять видимостью прямоугольной части блока. За это в спецификации CSS-P отвечает атрибут clip.
2.7.2 Порядок наложения блоков. Z-index
Если быть более точным, то блоки - это прямоугольные карточки, которые лежат на поверхности, перекрывая друг друга. Расстояние между ними задать нельзя, т.е. полноценного третьего измерения нет:
Рис. 27. Порядок наложения блоков. z-index
Порядок перекрытия блоков (слоев, в терминах Netscape) определяется атрибутом z-index. Чем больше значение z-index, тем ближе к наблюдателю находится слой:
Рис. 28. Порядок наложения блоков. z-index
Как мы видим, z-index может принимать и отрицательные значения.
При работе с этим атрибутом следует иметь в виду, что Netscape Navigator и Internet Explorer применяют разные модели описания "слойки". В Internet Explorer это просто числовой параметр, который закреплен за блоком и не влияет на значения данного параметра у других блоков. В Netscape Navigator изменение параметра z-index одного блока влияет на значения этого параметра у других блоков. Они, словно карточки на столе, перекладываются и получают новые номера.
Карточки перекрываются. Если нажать на гипертекстовую ссылку "Переложить", то голубая карточка поползет вниз и при обратном ходе ее положение относительно красной карточки изменится.
Рис. 29. Порядок наложения блоков. z-index
Рис. 30. Порядок наложения блоков. z-index
2.7.3 Область видимости блока. clip
Совершенно необязательно показывать весь блок целиком. Можно показать только часть блока. Управляется такое отображение параметром clip описания CSS:
<DIV STYLE="position:absolute;top:0;left:0;
width:300;height:50;
clip:rect(0,100,20,0);">
...
</DIV>
3. Порядок выполнения работы и индивидуальные задания
3.1 Содержание отчета
В отчете привести порядок выполнения работы, список использованных компонентов, экранные формы разработанного приложения и распечатку исходного кода.
3.2 Индивидуальные задания
Разработать дизайн главной страницы сайта в соответствии с выбранной предметной областью.
Задание можно выполнять в Блокноте, Dreamweawer-е
Создать новый проект (Dreamweawer) или папку MyProject, добавив файл index.html (текст приведен ниже) и папки css и image (для изображений, которые будут использованы при оформлении главной страницы сайта), в папку css поместить файл style.css
В файл index.html записать следующий код:
Файл index.html
<html>
<head>
<title>my site</title>
<link href="css/style.css" type="text/css" media="all" rel="stylesheet" />
</head>
<body>
<div class="center">
<div class="header">
my site
</div>
<div class="header">
my div
</div>
my div
</div>
</body>
</html>
В файл style.css записать код:
.header
{
border:1px solid #000000;
width:200px;
height:50px;
float:left;
}
.center
{
width:600px;
background:#ffffff;
margin:0px auto;
}
body
{
background:gray;
}
Пройти все пункты лабораторной работы, добавляя блоки в файл index.html, а стили к ним – в файл style.css.
Содержимое блоков должно соответствовать согласованной с преподавателем предметной области.