Поделиться Поделиться

Относительное позиционирование

Блоки с относительным позиционированием позиционируются относительно нормального потока и задаются с помощью свойства position: relative. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис.), отрицательное — сдвиг вверх.

Относительное позиционирование - Инвестирование - 1

Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо. При положительном значении top элемент опускается вниз, при отрицательном поднимается вверх.

Относительное позиционирование - Инвестирование - 2

Для относительного позиционирования характерны следующие особенности.

  • Этот тип позиционирования не применим к элементам таблицы вроде ячеек, строк, колонок и др.
  • При смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами.

Пример

В примере показан сдвиг текста заголовка вниз для придания ему особого стиля написания.

Относительное позиционирование - Инвестирование - 3

<html> <head> <title>Заголовок</title> <style type="text/css"> H1 { font: bold 2em Arial, Tahome, sans-serif; /* Параметры шрифта */ color: #fff; background: #375D4C; padding: 0 10px; } H1 SPAN { position: relative; /* Относительное позиционирование */ top: 0.3em; /* Сдвигаем вниз */ } </style> </head> <body> <h1><span>Аз и буки шрифтовой науки</span></h1> <p>Шрифт это средство выражения дизайна, а не какого-то банального чтения.</p> </body></html>

Пример

Относительное позиционирование - Инвестирование - 4

<HTML>
<HEAD>
<TITLE>Тег DIV</TITLE>
<style type="text/css">

#block1 {

width: 200px;

background: Yellow;

padding: 5px;

padding-right: 20px;

border: solid 1px Red;

float: left;

}

.block2 {

width: 200px;

background: White;

padding: 5px;

border: solid 2px green;

float: left;

position: relative;

top: 40px;

left: -70px;

}

</style>
</head>
<BODY>
<div id="block1">Это первый текстовый блок. Данный блок
имеет жёлтый фон и красную рамку. Толщина рамки 1 пиксел.</div>
<div class="block2">А это второй блок с белым Фоном.
Этот блок имеет зелёную рамку. Толщина рамки 2 пикселя.</div>
</body>
</html>

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

Пример

Относительное позиционирование - Инвестирование - 5

<html> <head> <title>Тег SPAN</title> <style> body { font-family: Arial, sans-serif; /* Рубленый шрифт */ } .letter { color: red; /* Красный цвет символов */ font-size: 200%; /* Размер шрифта в процентах */ font-family: serif; /* Шрифт с засечками */ position: relative; /* Относительное позиционирование */ top: 5px; /* Сдвиг сверху */ } </style> </head> <body> <p><span class="letter">Р</span>азумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей.</p> <p>Бернард Шоу</p> </body>

</html>

Вложенные слои

Обычно относительное позиционирование само по себе применяется не часто, поскольку есть ряд свойств выполняющих фактически ту же роль, к примеру, тот же margin. Но сочетание разных типов позиционирования для вложенных слоёв является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative, а для дочернего absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис.).

Относительное позиционирование - Инвестирование - 6

Отсчёт координат ведётся от внутреннего края границы, значения полей не учитываются.

Благодаря использованию четырёх свойств left, right, top, bottom для управления положением внутреннего слоя, размеры родительского слоя знать не обязательно. Это расширяет сферу применения позиционирования, поэтому position довольно активно применяется при вёрстке различных элементов.

Фиксированное положение

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.

Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на странице и всегда видны посетителю. В примере показано добавление подвала, который остаётся на одном месте независимо от объёма информации на сайте.

Относительное позиционирование - Инвестирование - 7

<HTML><HEAD> <TITLE>Фиксированный подвал</TITLE> <STYLE type="text/css"> BODY { margin-bottom: 50px; } #footer { position: fixed; /* Фиксированное положение */ left: 0; bottom: 0; /* Левый нижний угол */ padding: 10px; /* Поля вокруг текста */ background: #39b54a; /* Цвет фона */ color: #fff; /* Цвет текста */ width: 100%; /* Ширина слоя */ } </STYLE> </HEAD> <BODY> <DIV id="content"> Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Автор не гарантирует вашей безопасности при их использовании и снимает с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное! </DIV> <DIV id="footer">&copy; Влад Мержевич</div> </BODY></HTML>

Поскольку фиксированный подвал накладывается на текст и скрывает его, добавлен отступ снизу для тега BODY.

Вложенные стили

Вложенные стили используются следующим образом: внутренняя настройка стиля наследует и затем временно переопределяет, или изменяет, настройки внешнего стиля.

Относительное позиционирование - Инвестирование - 8
Пример.

В этом примере теги <span> используются для переопределения стиля параграфа для отдельных строк текста, которые будут иметь отличающийся тип шрифта и размеры. Таблицы стилей могут вкладываться друг в друга, так что стили каскадно спускаются на любое количество уровней. Окончание действия настроек стиля происходит в обратном порядке.

<p> <span style="font-size:12pt"> Здесь <span style="font-size:16pt"> показано <span style="font-size:20pt"> вложение <span style="font-size:24pt"> стилей </span> друг </span> в </span> друга.</span></p>

Пример.

Вложенные теги <div> решают такие же задачи оформления, но, кроме того, создают перенос строки.

<div style="font-size:12pt">Здесь Относительное позиционирование - Инвестирование - 9 <div style="font-size:16pt"> показано <div style="font-size:20pt"> вложение <div style="font-size:24pt"> стиля </div> друг </div> в </div> друга.</div>

CSS-макеты

Рассмотрим основные типы CSS-макетов, применяемые в дизайне Web-страниц.

← Предыдущая страница | Следующая страница →