Приднестровская поддержка XOOPS
С помощью CSS можно указать точное расположение элемента на странице.
Решение
CSS дает разработчику возможность абсолютного позиционирования элемента путем указания расстояния от него до верхнего, левого, правого или нижнего края документа. Два блока, изображенных на рис. 9.16, позиционированы абсолютно.
Рис. 9.16. Абсолютное позиционирование блоков
Код страницы будет таким:
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>Абсолютное позиционирование</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">Это первый блок. Его расположение 10 пикселов сверху и 20 пикселов
слева.</div>
<div id="box2">Это второй блок. Его расположение 2em снизу и 2em справа.</div>
</body>
</html>
position.css
#box1 {
position: absolute;
top: 10px;
left: 20px;
width: 150px;
background-color: #B0C4DE;
border: 2px solid #34537D;
padding: 10px;
}
#box2 {
position: absolute;
bottom: 2em;
right: 2em;
width: 150px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
padding: 10px;
}
Обсуждение
Задание элементу свойства position со значением absolute полностью удаляет его из основного потока элементов страницы. К примеру, при добавлении нескольких абзацев текста в рассмотренный выше документ два блока будут отображаться поверх него, как показано на рис. 9.17.
Рис. 9.17. Два абсолютно позиционированных блока больше не принадлежат основному потоку элементов (DEMO)
В HTML-коде документа абзацы располагаются под абсолютно позиционированными элементами div, однако последние удалены из основного потока, поэтому при обработке кода текст начинается непосредственно в верхнем левом углу страницы, как если бы блоков вообще не существовало.
Как мы увидим позже в разделе «Создание «резинового» макета с двумя колонками, в котором слева расположено меню, а справа – основная область с контентом», путем добавления внешних и внутренних отступов для других элементов с помощью свойств margin и padding можно создать дополнительное пространство для размещения абсолютно позиционированных элементов. Возможно, из рассмотренного примера это напрямую не следует, но элементы можно абсолютно позиционировать не только по отношению к краям документа (хотя такой подход наиболее широко распространен), но и по отношению к краям родительского элемента.
На рис. 9.18 изображен документ, содержащий два блока, причем розовый блок вложен в синий. Поскольку последний также позиционирован абсолютно, то именно по отношению к его краям рассчитывается позиция розового блока при абсолютном позиционировании.
Рис. 9.18. Позиционирование одного блока по отношению к другому
При этом был использован следующий код:
position2.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>Абсолютное позиционирование</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="position2.css" />
</head>
<body>
<div id="box1">Это первый блок. Его расположение 150 пикселов сверху
и 100 пикселов слева.
<div id="box2">Это второй блок. Его расположение 2em снизу
и 2em справа от родительского элемента - первого блока.</div>
</div>
</body>
</html>
position2.css
#box1 {
position: absolute;
top: 150px;
left: 100px;
width: 400px;
background-color: #B0C4DE;
border: 2px solid #34537D;
padding: 10px;
}
#box2 {
position: absolute;
bottom: 2em;
right: 2em;
width: 150px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
padding: 10px;
}
Для большей наглядности присвоим элементу box1 свойство height со значением 300 пикселов:
#box1 {
position: absolute;
top: 20px;
left: 100px;
width: 400px;
height: 300px;
background-color: #B0C4DE;
border: 2px solid #34537D;
padding: 10px;
}
Как видно на рис. 9.19, розовый блок теперь целиком располагается внутри синего, а не «вылезает» из него сверху. Такой эффект достигается позиционированием розового блока по отношению к нижнему и правому краям синего блока.
Рис. 9.19. Розовый блок отображается внутри синего
Отправитель | Нити |
---|
5 пользователь(ей) активно (4 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 5 далее... |