Позиционирование блока
Атрибут position позволяет задать способ позиционирования блока. Он мо-
жет принимать одно из четырех значений:
? static — статическое позиционирование (значение по умолчанию). По- ложение элемента в окне Web-браузера определяется его положением в тексте HTML-документа;
? relative — относительное позиционирование. Координаты отсчитыва- ются относительно позиции, в которую Web-браузер поместил бы эле- мент, будь он статически позиционированным;
? absolute — абсолютное позиционирование. Координаты отсчитываются относительно левого верхнего угла родительского элемента;
? fixed — фиксированное позиционирование. Координаты отсчитываются относительно левого верхнего угла окна Web-браузера. При прокрутке содержимого окна блок не смещается.
П РИМ Е ЧАНИЕ
Web-браузер Internet Explorer поддерживает атрибут fixed начиная с вер-
сии 7.0.
Для указания привязки предназначены следующие атрибуты:
? left — расстояние от левой границы;
? top — расстояние от верхней границы;
? right — расстояние от правой границы;
? bottom — расстояние от нижней границы.
Эти атрибуты могут иметь отрицательные значения. Статически позициони-
рованные элементы не имеют атрибутов left, top, right и bottom.
Давайте рассмотрим все это на примере (листинг 2.11).
Листинг 2.11. Позиционирование блоков
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Позиционирование блоков</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
<style type="text/css">
body { font-family: Verdana, Tahoma, sans-serif; font-size: 14px }
div { border: 1px solid black }
.div1 { width: 10px; height: 2000px; left: 900px; top: 0;
position: absolute }
.div2 { height: 20px; position: static; background-color: silver }
.div3 { height: 20px; position: relative; top: 30px;
background-color: silver }
.div4 { width: 150px; height: 150px; position: absolute; top: 30px;
left: 400px; background-color: green }
.div5 { width: 300px; height: 300px; position: absolute; top: 250px;
left: 400px; }
.div6 { width: 100px; height: 100px; position: absolute; top: 50px;
left: 50px; background-color: #F5D8C1 }
.div7 { width: 150px; height: 300px; position: fixed; top: 150px;
left: 20px; background-color: #FF9600 }
.div8 { width: 100%; height: 50px; left: 0; bottom: 0; margin: 0;
position: fixed; background-color: #F4AB56 }
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">Статическое позиционирование</div>
<div class="div3">Относительное позиционирование</div>
<div class="div4">Абсолютное позиционирование</div>
<div class="div5">Абсолютное позиционирование внутри родительского блока
<div class="div6">top: 50px; left: 50px;</div>
</div>
<div class="div7">Фиксированное позиционирование</div>
<div class="div8">Фиксированное позиционирование относительно нижней границы</div>
</body>
</html>
Итак, на странице восемь блоков.
Блок div1 имеет абсолютное позиционирование и смещен на 900 px относи- тельно левой границы окна Web-браузера. Для блока также указана большая высота (2000 px). Это позволит увидеть эффект фиксированного позициони- рования для блоков div7 и div8, так как Web-браузер отобразит вертикаль- ную полосу прокрутки.
Блок div2 имеет статическое позиционирование, а блок div3 — относитель- ное. Блок div3 сдвинут на 30 px вниз относительно блока div2, а не от верх- ней границы окна Web-браузера.
Блоки div4, div5 и div6 имеют абсолютное позиционирование. Блок div4
сдвинут на 400 px относительно левой границы окна Web-браузера и на
30 px — относительно верхней. Внутри блока div5 расположен блок div6. Смещения этого блока отсчитываются относительно границ блока div5, а не границ окна Web-браузера.
Блоки div7 и div8 имеют фиксированное позиционирование. Блок div7 де- монстрирует возможность размещения панели навигации в определенном месте, а блок div8 — прикрепление блока к нижней границе окна Web- браузера. Чтобы увидеть отличие от других видов позиционирования пере- местите вертикальную полосу прокрутки вниз. Эти блоки всегда остаются на своих местах и не перемещаются при прокрутке. Однако не следует забывать, что Web-браузер Internet Explorer поддерживает атрибут fixed, начиная с версии 7.0.
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Создание «резинового» макета: слева – меню, а справа – область с контентом (0)
- Макет фиксированной ширины с двумя колонками по центру страницы (0)
- Создание макета с тремя колонками средствами CSS (0)
- Изменение стиля горизонтальной линии (0)
- Создание навигационного меню с подпунктами с помощью списков и таблиц стилей (0)
- Создание горизонтального меню с помощью списков и CSS (0)
- Представление табличных данных в привлекательной и удобной форме (0)
