Техника Web-дизайна для студента
Позиционирование объектов
Различают статическое, относительное и абсолютное позиционирование объектов. Позиционирование задается свойством position, которое может приобретать следующие значения: static — статическое (по умолчанию), relative — относительное, absolute — абсолютное. Для относительного и абсолютного позиционирования используются еще четыре свойства left и right, задающие смещение объекта по горизонтали, top и bottom — по вертикали. На практике необходимо использовать по одному значению каждой пары.
Статическое позиционирование действует по умолчанию и предусматривает размещение очередного объекта на свободное место вслед за предыдущим. Причем разные объекты будут вести себя по-разному. Например, абзацы будут располагаться друг под другом, даже если ширина абзаца ограничена. Рисунки будут располагаться в одной строке, если для этого достаточно места и предшествующие метки <img> не содержат параметра align. Пример документа, в котором используется статическое позиционирование, приведен в листинге 7.10.
Листинг 7,10. Пример статического позиционирования четырех объектов
<body>
<р style="font-size: 14pt; background-color: yellow; width: 150рх">Это первый абзаце/р> <р style="font-size: 14pt; background-color: yellow; position: static; width: 150рх">Это второй абзац</р>
<img src="l. jpg" width="151" height="100">
<img src="2.jpg" width="142" height="100">
</body>
В документе представлено четыре объекта: два абзаца и два рисунка. Все они позиционированы статически. Для второго абзаца позиционирование задано явно, для остальных объектов — по умолчанию. Внешний вид документа в окне браузера показан на рис. 7.9.
|
Рис. 7.9. Результат статического позиционирования двух абзацев и двух рисунков |
Относительное позиционирование определяет положение объекта относительно того места, которое он бы занял, если бы был позиционирован статически. Значение свойства left определяет смещение объекта слева направо, top — сверху вниз, right — справа налево, bottom — СНИЗу ВВСрХ ОТНОСИТеЛЬНО МССТ21 СТЭТИ - ческого позиционирования. Очевидно, что если ни одно из свойств left, top, right или bottom не задано, то относительное позиционирование эквивалентно статическому. Последующие объекты позиционируются относительно места статического положения объекта независимо от заданных для него смещений. В качестве примера будем использовать тот же документ, что и в предыдущем случае, изменив позиционирование первого рисунка на относительное (листинг 7.11).
Листинг 7.11. Пример относительного позиционирования одного объекта и статического позиционирования трех объектов
<body>
<р style="font-size: 14pt; background-color: yellow; width: 150рх">Это первый абзаце/р>
<р style="font-size: 14pt; background-color: yellow; width: 150рх">Это второй абзац</р>
<img src="l. jpg" width="151" height="100" style="position: relative; left: 80px; top: -50px">
<img src="2.jpg" width="142" height="100">
</body>
|
Рис. 7.10. Результат относительного позиционирования одного объекта и статического позиционирования трех объектов |
Рисунок смещен вверх на 50 рх (отрицательное значение) и вправо на 80 рх относительно того положения, которое он занимал при статическом позиционировании. Особо следует обратить внимание на второй рисунок, который сохранил свое положение. Он позиционирован относительно положения статического позиционирования первого рисунка (рис. 7.10).
Абсолютное позиционирование предусматривает позиционирование объекта с помощью свойств left, top, right или bottom. Отсчет смещения объекта по горизонтали, заданного свойством left, осуществляется от левого края страницы. Если объект является дочерним, то смещение произойдет от левого края родительского объекта при условии, что родительский объект также имеет абсолютное позиционирование. Аналогично смещение, заданное свойством right, отсчитывается от правого края страницы или правого края родительского объекта. Смещение, заданное свойством top или bottom, отсчитывается соответственно от верхнего края страницы (родительского объекта) или нижнего края страницы (родительского объекта). Объект, позиционированный абсолютно, выпадает из общего потока объектов и его положение никак не влияет на положение следующих за ним объектов.
В приведенном ниже документе первый рисунок получил абсолютное позиционирование (листинг 7.12).
<body>
<р style="font-size: 14pt; background-color: yellow; width: 150рх">Это первый абзаце/р>
<р style="font-size: 14pt; background-color: yellow; width: 150рх">Это второй абзац</р>
<img src="l. jpg" width="151" height="100" style="position: absolute; left: 90; top: 50">
<img src="2.jpg" width="142" height="100">
</body>
В отличие от предыдущего примера, смещение первого рисунка по горизонтали отсчитывается от левого края страницы, а по вертикали — от верхнего края страницы. Кроме того, он выпал из общего потока статически позиционированных объектов, освободив место для второго рисунка. Результат показан на рис. 7.11.
|
Рис. 7.11. Результат абсолютного позиционирования одного объекта и статического позиционирования трех объектов |
