HTML, XHTML и CSS на 100%
Шрифт:
IMG.icon {
float: left;
margin-left: 0;
}
Рассмотрим исходный HTML-документ и таблицу стилей на примере из листинга 9.14.
<html>
<head>
<title>Глава 9. Пример перемещаемого объекта</title>
<style type="text/css">
img { float: left }
body, p, img { margin: 2em }
</style>
</head>
<body>
<img src="img.gif" alt="Данный рисунок иллюстрирует перемещаемые объекты">
Пример текста, у которого нет другого...
</body>
</html>
Блок, порожденный элементом IMG, перемещается влево. Следующее за ним содержимое форматируется справа от него, начиная с той же строки, на которой находится он сам. Присутствие перемещаемого объекта влияет на то, что, пока линейные блоки находятся справа от него, они укорачиваются, но как только они достигают его конца, сразу восстанавливают свою исходную ширину (равную ширине контейнера, назначенного элементом P). Приведенный документ может быть отформатирован следующим образом:
<body>
Произвольный текст,
<img src="img.gif" alt="Данный рисунок иллюстрирует перемещаемые объекты">
у которого нет другого...
</body>
Это объясняется тем, что содержимое, находящееся слева от перемещаемого объекта, заменяется им, а само отображается справа от него.
Фиксированное позиционирование
Фиксированное позиционирование – разновидность абсолютного позиционирования. Единственным его отличием является то, что контейнер определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они схожи с фиксированными фоновыми изображениями. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это может оказаться удобным, например, при размещении подписей в нижней части каждой страницы.
Вы можете использовать фиксированное позиционирование для создания презентации в виде совокупности кадров. Рассмотрим один из примеров такой презентации, представленный на рис. 9.5.
Рис. 9.5. Фиксированное позиционирование
Подобного эффекта можно достичь с помощью HTML-кода и правил стиля, представленных в листинге 9.15.
<html>
<head>
<title>Глава 9. Создание кадров в CSS</title>
<style type="text/css">
body { height: 8.5in } /* будет использовано ниже для определения */
/* процентных соотношений, задающих значение */
/* высоты элемента */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="header"> ... </div>
<div id="sidebar"> ... </div>
<div id="main"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
Попробуйте нарисовать на листе бумаги свою разметку страницы, а потом создать ее, используя приобретенные навыки.
Определение позиционного уровня
Для размещенного блока вы можете задать позиционный уровень, в текущем контексте используя свойство z-index. Это свойство может принимать такие значения.
• «целое число» – является значением позиционного уровня сгенерированного блока в текущем контексте. Блок также назначает локальный позиционный контекст с позиционным уровнем 0.
• auto – позиционный уровень блока в текущем контексте совпадает с позиционным уровнем родительского блока.
Рассмотрим пример, приведенный в листинге 9.16. В этом примере позиционные уровни блоков именуются с использованием атрибута id. Причем позиционный уровень text2 наследуется от корневого блока. Другие уровни указываются свойством z-index.
<html>
<head>
<title>Глава 9. Позиционирование вдоль оси z</title>
<style type="text/css">
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
</style>
</head>
<body>
<img id="image" class="pile"
src="someimg.gif" alt="Картинка"
style="z-index: 1">
<div id="text1" class="pile"
style="z-index: 3">
Этот текст будет находиться поверх изображения.
</div>
<div id="text2">
Этот текст будет находиться под всем остальным.
</div>
<div id="text3" class="pile"
style="z-index: 2">
Этот текст будет находиться ниже текста text1, но поверх изображения.
</div>
</body>
</html>
Данный пример должен пояснить вам понятие прозрачности. По умолчанию блок ведет себя так, что другие блоки, находящиеся за ним, видны сквозь прозрачную область его содержимого. В данном примере каждый блок, накладывающийся на другие блоки, является прозрачным. Такой тип поведения может быть переназначен посредством использования одного из существующих свойств фона.