До этого момента, работая над размещением элементов Web-страницы по всему пространству окна броузера, мы часто пользовались таблицами. Новые возможности для задания размеров объекта и его положения относительно других элементов Web-страницы предоставляют стилевые таблицы.
Свойства для задания размеров объекта:
- width – ширина элемента. Значение атрибута вводится цифрами в абсолютных единицах или в процентах;
- height – высота элемента. Способ задания значений – аналогично ширине элемента.
Размещение (позиционирование) объектов на странице происходит на основе определения точки, на которую приходится левый верхний угол позиционируемого элемента. Используемая система координат имеет начало (точка 0,0) в левом верхнем углу документа, а оси Х и У простираются соответственно вправо и вниз.
Можно выделить три способа позиционирования: абсолютное (задается относительно начала системы координат), относительное (относительно элемента-родителя) и статическое (распределение элементов производится броузером так, как это в нем задано по умолчанию). На практике нет необходимости в задании статического размещения объектов, поскольку этот способ выбирается автоматически при отсутствии других указаний.
Свойства позиционирования:
- position – атрибут, определяющий способ позиционирования. Допустимые значения: absolute (абсолютное позиционирование), relative (относительное позиционирование), static (статическое позиционирование);
- left – смещение элемента вправо от его текущей позиции на web-странице. Текущая позиция – это та, которую элемент занял бы без использования позиционирования. Значение атрибута выражается в единицах длины; это может быть и отрицательная величина;
- top – смещение элемента вниз от его текущей позиции на Web-странице. Значение атрибута выражается в единицах длины; это может быть и отрицательная величина;
- z-index – этим атрибутом задается очередность наложения элементов (номер слоя). В случае абсолютного и относительного позиционирования есть большая вероятность того, что располагаемые на Web-странице элементы наложатся друг на друга.
Задавая числовое значение атрибута z-index, указывают броузеру, в какой очередности он должен располагать слои элементов. Так контролируется третье измерение документа. Если порядок наложения элементов несуществен, можно в поле значения атрибута указать ключевое слово auto.
Рекомендуем почитать:
• Поля в CSS
• Отступы на веб-странице
• CorelDRAW Х3. Экспресс-курс
Оставить комментарий: