Позиционирование элемента на странице с помощью CSS
С помощью CSS можно указать точное расположение элемента на стра- нице.
Решение
CSS дает разработчику возможность абсолютного позиционирования элемента путем указания расстояния от него до верхнего, левого, право- го или нижнего края документа. Два блока, изображенных на рис. 9.16, позиционированы абсолютно.
Рис. 9.16. Абсолютное позиционирование блоков
Код страницы будет таким:
chapter09/position.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Absolute positioning</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
<link rel=”stylesheet” type=”text/css” href=”position.css” />
</head>
<body>
<div id=”box1”>This is box one. It is positioned 10 pixels from the top and 20 pixels from the left of the viewport.
</div>
<div id=”box2”>This is box two. It is positioned 2em from the bottom and
2em from the right of the viewport.</div>
</body>
</html>
chapter09/position.css
#box1 {
position: absolute;
top: 10px; left: 20px; width: 100px;
background-color: #B0C4DE;
border: 2px solid #34537D;
}
#box2 {
position: absolute;
bottom: 2em;
right: 2em;
width: 100px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
}
Обсуждение
Задание элементу свойства position со значением absolute полностью удаляет его из основного потока элементов страницы. К примеру, при добавлении нескольких абзацев текста в рассмотренный выше документ два блока будут отображаться поверх него, как показано на рис. 9.17.
Рис. 9.17. Два абсолютно позиционированных блока больше не принадлежат основному потоку элементов
В HTML-коде документа абзацы располагаются под абсолютно позици- онированными элементами div, однако последние удалены из основно- го потока, поэтому при обработке кода текст начинается непосредствен- но в верхнем левом углу страницы, как если бы блоков вообще не суще- ствовало.
Как мы увидим позже в разделе «Создание «резинового» макета с двумя колонками, в котором слева расположено меню, а справа – основная об- ласть с контентом», путем добавления внешних и внутренних отступов для других элементов с помощью свойств margin и padding можно создать дополнительное пространство для размещения абсолютно позициониро- ванных элементов. Возможно, из рассмотренного примера это напрямую не следует, но элементы можно абсолютно позиционировать не только по отношению к краям документа (хотя такой подход наиболее широко рас- пространен), но и по отношению к краям родительского элемента.
На рис. 9.18 изображен документ, содержащий два блока, причем розо- вый блок вложен в синий. Поскольку последний также позициониро-
ван абсолютно, то именно по отношению к его краям рассчитывается позиция розового блока при абсолютном позиционировании.
Рис. 9.18. Позиционирование одного блока по отношению к другому
При этом был использован следующий код:
chapter09/position2.html (фрагмент)
<div id=”box1”>This is box one. It is positioned 100 pixels from the top and
100 pixels from the left of the viewport.
<div id=”box2”>This is box two. It is positioned 2em from the bottom and
2em from the right of the parent element - box one.
</div>
</div>
chapter09/position2.css
#box1 {
position: absolute;
top: 100px; left: 100px; width: 400px;
background-color: #B0C4DE;
border: 2px solid #34537D;
}
#box2 {
position: absolute;
bottom: 2em; right: 2em; width: 150px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
}
Для большей наглядности присвоим элементу box1 свойство height со значением 300 пикселов:
chapter09/position3.css (фрагмент)
#box1 {
position: absolute;
top: 100px;
left: 100px; width: 400px; height: 300px;
background-color: #B0C4DE;
border: 2px solid #34537D;
}
Как видно на рис. 9.19, розовый блок теперь целиком располагается внутри синего, а не «вылезает» из него сверху. Такой эффект достигает- ся позиционированием розового блока по отношению к нижнему и пра- вому краям синего блока.
Рис. 9.19. Розовый блок отображается внутри синего
Позиционирование от родителя. Важно помнить, что дочерние элементы (box2) могут позиционироваться по отношению к родительскому элементу (box1), только если расположение последнего также задано средствами CSS.
Если для родительского элемента не задано свойство position, дочерний эле- мент будет позиционироваться по отношению к краям первого позициониро- ванного предка – родителя родителя и т. д. – или в итоге элемента body (ины- ми словами, по отношению к краям документа). В приведенном выше примере при отсутствии позиционирования родительского элемента расположение дочернего элемента будет рассчитываться по отношению к краям документа, поскольку он является предком следующего уровня.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- УЛУЧШЕНИЕ РЕПУТАЦИИ ВЕБ-САЙТА (0)
- Что такое селекторы и как их правильно использовать (0)
- Создание «резинового» макета: слева – меню, а справа – область с контентом (0)
- Создание макета с тремя колонками средствами CSS (0)
- Изменение стиля горизонтальной линии (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Создание навигационного меню с подпунктами с помощью списков и таблиц стилей (0)
