Относительное и фиксированное позиционирование. Наложение элементов Относительное позиционирование
Один из эффективных приёмов позиционирования состоит в том, чтобы размещать маленькие объекты относительно других объектов на странице, например, блок внутри блока. Для этого блок-контейнер позиционируют относительно (при этом он остаётся на месте и не выбивается из нормального потока), а внутренний блок - абсолютно. Точнее, абсолютная позиция отсчитывается от первого блока в ряду контейнеров, который имеет позиционирование absolute, relative или fixed (но не static). Если такого контейнера нет, то им считается окно. Пример 6.8 показывает размещение абсолютно позиционированного элемента span в правом нижнем углу его контейнера div.
div {
width: 70%;
border: 4px dotted gray;
padding: 4px;
padding-bottom: 30px;
position: relative;
margin: 10px auto;
}
div span {
position: absolute;
bottom: 0;
right: 0;
background: #ddd;
padding: 2px;
margin: 2px;
}
...
<div>
<span>Внутренний блок 1</span> Один из эффективных приёмов позиционирования
состоит в том, чтобы размещать маленькие объекты относительно других объектов
на странице, например, блок внутри блока. Для этого блок-контейнер позиционируют
относительно (при этом он остаётся на месте и не выбивается из нормального
потока), а внутренний блок - абсолютно.
</div>
<div>
<span>Внутренний блок 2</span> Данный пример показывает размещение абсолютно
позиционированных элементов span в правых нижних углах их контейнеров.
Внутренние блоки позиционированы посредством задания свойств bottom: 0;
right: 0;
</div>
Листинг 6.8. Применение относительного позиционирования (html, txt)
Упражнение. Позиционируйте элемент span в правый верхний угол секции. Подберите для секции подходящее значение отступа.
Таким образом, все основные задачи позиционирования можно решить, только пользуясь всеми тремя описанными подходами:
для стыковки блоков по горизонтали применяется позиционирование на основе плавающих элементов;
для стыковки блоков по вертикали применяется позиционирование на основе нормального потока;
для размещения блока в специфической позиции относительно контейнера применяется абсолютное позиционирование блока в сочетании с относительным позиционированием контейнера.
Рис. 6.8. Применение относительного позиционирования
Упражнения. Придумайте разметку для такой структуры блоков: один сверху на всю ширину окна; ещё три - под ним, в один горизонтальный ряд, одинаковой ширины (с небольшими полями между блоками).
Фиксированное позиционирование
Часто бывает нужно, чтобы некоторые элементы страницы были постоянно видимыми, например, навигационная панель, поле для поиска или логотип сайта, а, как известно, большинство веб-страниц длиннее высоты экрана. Используя значение fixed свойства position, вы можете зафиксировать некоторые элементы в определенных местах, разрешая при этом пользователям прокручивать содержимое очень длинной веб-страницы. Фиксированное позиционирование работает во многом подобно абсолютному — вы точно так же можете использовать свойства top, bottom, left или right для размещения элемента. Как и абсолютное, фиксированное позиционирование удаляет элемент из потока HTML. Он "плавает" над другими частями страницы, которые просто игнорируют его. Фиксированное позиционирование не работает в Internet Explorer версий 6 и ниже.
div {
margin-left: 210px;
}
.fixed {
position: fixed;
left: 10px;
top: 100px;
list-style-position: inside;
margin: 10px;
border: 1px solid black;
background: #ccc;
padding: 3px;
width: 170px;
}
...
<ul class="fixed">
<li>Это список,</li>
<li>позиционированный фиксированно</li>
<li>в точке (10px; 100px)</li>
</ul>
<div>
<p>
Это длинный блок текста, и для его полного просмотра нужно прокручивать
страницу вниз. Фиксированно позиционированный список при этом остаётся
на месте.
</p>
...
</div>
Листинг 6.9. Применение фиксированного позиционирования (html, txt)
Рис. 6.9. Применение фиксированного позиционирования
Упражнение. Переместите фиксированный блок в правую часть страницы. Подберите отступ для основного содержимого.