Позиционирование объектов и определение их размеров в CSS

До этого момента, работая над размещением элементов Web-страницы по всему пространству окна броузера, мы часто пользовались таблицами. Новые возможности для задания размеров объекта и его положения относительно других элементов Web-страницы предоставляют стилевые таблицы.

Свойства для задания размеров объекта:

• width – ширина элемента. Значение атрибута вводится цифрами в абсолютных единицах или в процентах;
• height – высота элемента. Способ задания значений – аналогично ширине элемента.

Размещение (позиционирование) объектов на странице происходит на основе определения точки, на которую приходится левый верхний угол позиционируемого элемента. Используемая система координат имеет начало (точка 0,0) в левом верхнем углу документа, а оси Х и У простираются соответственно вправо и вниз.

Можно выделить три способа позиционирования: абсолютное (задается относительно начала системы координат), относительное (относительно элемента-родителя) и статическое (распределение элементов производится броузером так, как это в нем задано по умолчанию). На практике нет необходимости в задании статического размещения объектов, поскольку этот способ выбирается автоматически при отсутствии других указаний.

Свойства позиционирования:

• position – атрибут, определяющий способ позиционирования. Допустимые значения: absolute (абсолютное позиционирование), relative (относительное позиционирование), static (статическое позиционирование);
• left – смещение элемента вправо от его текущей позиции на web-странице. Текущая позиция – это та, которую элемент занял бы без использования позиционирования. Значение атрибута выражается в единицах длины; это может быть и отрицательная величина;
• top – смещение элемента вниз от его текущей позиции на Web-странице. Значение атрибута выражается в единицах длины; это может быть и отрицательная величина;
• z-index – этим атрибутом задается очередность наложения элементов (номер слоя). В случае абсолютного и относительного позиционирования есть большая вероятность того, что располагаемые на Web-странице элементы наложатся друг на друга.

Задавая числовое значение атрибута z-index, указывают броузеру, в какой очередности он должен располагать слои элементов. Так контролируется третье измерение документа. Если порядок наложения элементов несуществен, можно в поле значения атрибута указать ключевое слово auto.

http://www.4webmaster.ru/

Рекомендуем почитать:
• Поля в CSS
• Отступы на веб-странице
• CorelDRAW Х3. Экспресс-курс