Позиционирование в CSS

Лабораторная 4

Стандарт CSS позволяет с точностью до пикселя разместить блочный элемент разметки в рабочем поле окна браузера. При таком подходе возникает естественный вопрос: как устроена система координат, в которой автор страницы производит размещение ее компонентов.

CSS определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость размещения элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга.

Блоки –представляют собой прямоугольники, которые "заметают" площадь. Текст и другие компоненты страницы под блоком становятся недоступны пользователю, поэтому линейные размеры блока имеют для создания HTML-страниц не меньшее значение, чем его координаты.

При использовании "абсолютных" координат точка отсчета помещается в верхний левый угол родительского блока (например, окна браузера), а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно.

Если в этой системе координат некоторый блочный элемент должен быть размещен на 10 px ниже верхнего обреза рабочей области браузера и на 20 px правее левого края рабочей области браузера, то его описание будет выглядеть следующим образом:

.example { position:absolute;top:10px;

left:20px; }

В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение – 20 px), координата Y – атрибутом top (значение – 10 px).

Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат.

Рис. 1. Абсолютные координаты

Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами 100 px (высота) на 200 px (ширина), достаточно позиционировать его следующим образом:

.example { position:absolute;

top:-100px;left:-200px;

width:200px;height:100px; }

Абсолютное позиционирование применяется тогда, когда либо все содержание страницы должно быть доступно без скроллинга ("прокрутки"), либо когда элементы разметки находятся в начале страницы и их взаимное расположение важно с точки зрения дизайна, например, для использования всплывающих меню.

Данная координатная система позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества такой системы координат очевидны: она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера и его настройках по умолчанию.

В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y - вертикально вниз.

Чтобы задать координаты блока, в этой системе применяют запись типа:

<DIV STYLE="border-width:1px;

border-style:solid;width:100%;

height:100px;">

<DIV STYLE="position:relative;top:0px;

left:0px;border-width:1px;">

Этот блок находится в точке отсчета

относительных координат

</DIV>

<DIV STYLE="position:relative;top:0px;

left:50px;border-width:1px;">

А этот блок смещен вправо на 50px

</DIV>

</DIV>

Рис. 2. Относительные координаты

Для работы с относительной системой координат лучше пользоваться универсальными блоками DIV. Это связано с тем, что в Netscape Navigator, например, параграф не может содержать параграфов. Любой блок немедленно закрывает параграф, следовательно, вложить в него что-либо нельзя.

В относительной системе координат можно пользоваться отрицательными смещениями:

<DIV STYLE="position:relative;

top:0;left:50;border-width:1px;

border-style:solid;width:200px;">

<A HREF="javascript:

if(flag==0)

{ window.document.layers[2].left=-50;flag=1; }

else

{ window.document.layers[2].left=50;flag=0; };

void(0);">

Сдвинуть слой

</A>

</DIV>

Рис. 3. Относительные координаты

Рис. 4. Относительные координаты

В данном примере слой, первоначально сдвинутый на 50 пикселов вправо, после нажатия на гипертекстовую ссылку смещается на 100 пикселов влево, получая отрицательную величину смещения по оси X (left:-50 px). После повторного нажатия на ссылку положение блока восстанавливается.

Линейные размеры блока задаются двумя параметрами: шириной (width) и высотой (height) блока. В браузерах ширина и высота блока интерпретируется по-разному.

В Netscape Navigator ширина и высота блока - рекомендуемые параметры. Если текст выходит за эти ограничения, то блок увеличивается до необходимых размеров, а если текста нет вообще, то блок сжимается до маленького квадрата:

<P STYLE="width:200px;height:100px;

background-color:black;color:white;">

...

</P>

Приведенного в примере описания достаточно для получения результата, но в Netscape Navigator для такого блока нужно применить некоторые дополнительные атрибуты:

<P STYLE="width:200px;height:100px;

background-color:black;color:white;

border-width:1px;border-color:white;">

<SPAN STYLE="color:white;">

...

</SPAN>

</P>

Рис. 5. Линейные размеры блока

Без границы блок не будет залит черным цветом, а без span текст будет отображаться цветом данной страницы по умолчанию. Никакому разумному объяснению такое поведение браузера не поддается, поэтому строить дизайн страниц на этих атрибутах не стоит.

position – алгоритм позиционирования; устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

top – вертикальное смещение блока относительно верха контейнера

right – горизонтальное смещение блока относительно правой границы контейнера

bottom – вертикальное смещение блока относительно низа контейнера

left – горизонтальное смещение блока относительно левой границы контейнера

float – задает смещение блока, вследствие чего блок будет обтекаться текстом контейнера

clear – задает управление потоком после смещенного блока

z-index – позиционный уровень блока; блок с большим свойством

z-index располагается над блоком с меньшим свойством z-index

display – тип структурного блока, порождаемого HTML- элементом, которому приписано данное свойство стиля; т.е. это свойство указывает на поведение и, следовательно, отображение данного HTML-элемента. Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Например, значение display:inline заставляет элемент (насколько это возможно) встраиваться в строку данных; значение display:block выводит его с новой строки и позволяет задать элементу свойства блока; значение display:none исключает элемент из потока и вообще не показывает его и т.д.

Например, вариант описания стиля, запрещающий показ графики:

img { display: none }

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>position</title>

<style>

.layer1 {

position: relative; /* Относительное позиционирование */

background: #f0f0f0; /* Цвет фона */

height: 400px; /* Высота блока */

}

.layer2 {

position: absolute; /* Абсолютное позиционирование */

bottom: 15px; /* Положение от нижнего края */

right: 15px; /* Положение от правого края */

line-height: 1px;

}

</style>

</head>

<body>

<div class="layer1">

<div class="layer2">

<img src=" images/toy.gif" alt="Игрушка" />

</div>

</div>

</body>

</html>

Рис. 6. Применение свойства position

Пример 2: использование z-index

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>z-index</title>

<style>

#layer1, #layer2, #layer3, #layer4 {

position: relative; /* Относительное позиционирование */

}

#layer1, #layer3 {

font-size: 50px; /* Размер шрифта в пикселах */

color: #000080; /* Синий цвет текста */

}

#layer2, #layer4 {

top: -55px; /* Сдвигаем текст вверх */

left: 5px; /* Сдвигаем текст вправо */

color: #ffa500; /* Оранжевый цвет текста */

font-size:70px; /* Размер шрифта в пикселах */

}

#layer1 { z-index: 2; }

#layer2 { z-index: 1; }

#layer3 { z-index: 3; }

#layer4 { z-index: 4; }

</style>

</head>

<body>

<p>Слой 1 наверху</p>

<div id="layer1">Слой 1</div>

<div id="layer2">Слой 2</div>

<p>Слой 4 наверху</p>

<div id="layer3">Слой 3</div>

<div id="layer4">Слой 4</div>

</body>

</html>

Рис. 7. Применение свойства z-index

Задания:

1. Добавьте в следующий HTML-код:

стили таким образом, чтобы страница выглядела так, как показано ниже: (Внимание! Новые HTML-теги добавлять нельзя!).

2. Добавьте в следующий HTML-код:

3. Для приведённого кода создайте стиль, с помощью которого можно получить результат, представленный на рисунке ниже. Страница должна корректно отображаться в браузерах IE8, IE9, Firefox 5, Opera 11 и Chrome.

Код не должен меняться, за исключением раздела <head>.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Квадраты</title>

</head>

<body>

<div class="black"></div>

<div class="white"></div>

</body>

</html>