Позиционирование
Объекты располагаются на Web-странице сверху - вниз согласно очередности упоминания в HTML-коде. Но их можно также смещать относительно текущих позиций, либо задавать им точные координаты расположения.
В нижеприведенном HTML-коде задано абсолютное положение заголовков первого (h1) и третьего (h3) уровней и изображения "smile":
<html><head>
<style type="text/css">
h1 {
position: absolute;
left:150px;
top:150px;
color: #008000
}
h3 {
position: absolute;
left:450px;
top:350px;
color: red
}
.mx {
position: absolute;
left:650px;
top:120px
}
</style>
</head>
<body>
<h1>Позиционирование</h1>
<h3>Расположение текста задано именно здесь.</h3>
<p class="mx"><img src="images/smile.gif"></p>
</body>
</html>
Параметр position - задает способ позиционирования для элемента и используется со значениями:
- static - элемент будет отображаться точно в том месте страницы, которое задано ему в HTML коде;
- relative - позиционирование будет выполняться относительно текущих координат элемента;
- absolute - положение элемента будет определяться абсолютными координатами.
Сначала задается способ позиционирования элемента, а затем уже его координаты. Для системы абсолютного позиционирования элементов координаты указывают с помощью:
- top - задает позицию верхней границе элемента (в % или px, cm, mm, auto, inherit);
- left - задает позицию левой границе элемента.
