Справочник по CSS

Атрибуты позиционирования

left

При позиционировании элемента используйте атрибут left для определения того, насколько далеко от левого края окна броузера должен находиться левый край данного элемента.

Синтаксис

left: length | percentage | auto

Значения

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

Примеры

H2{position:relative;left:3em;}
#productShot{position:absolute;top:50px;left:300px;}

position

Этот атрибут определяет, является ли элемент позиционируемым и какое позиционирование должно применяться.

Синтаксис

position: position

Значения

В обоих броузерах могут применяться только два значения опции position: relative | absolute.

Примеры

#pants{position:absolute;top:40px;left:90px;}

top

При позиционировании элементов атрибут top позволяет установить, насколько далеко от верхнего края окна броузера должен находиться верхний край элемента.

Синтаксис

top: length | percentage | auto

Значения

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

Примеры

H2{position:relative;top:3em;}
#productShot{position:absolute;top:50px;left:300px;}

visibility

Данный атрибут устанавливает, являются ли позиционированные элементы видимыми. Он резервирует на странице место для элемента, даже если тот отображается как невидимый. Если вы не хотите резервировать на странице место для данного элемента, используйте атрибут display.

Синтаксис

visibility: visibility

Значения

Значениями опции visibility, работающими в обоих броузерах, являются только: visible | hidden | inherit.

Примеры

#ecommerce{visibility:hidden;}

width

Этот атрибут позволяет управлять (с определенными оговорками) шириной блока информационного наполнения. По нашему мнению, он наиболее полезен в тех ситуациях, когда блоки текста не должны превышать указанной ширины. Однако броузеры Netscape и IE трактуют атрибут слишком по-разному, поэтому тщательно все проверяйте, прежде чем выставить страницу с атрибутом ширины width.

Синтаксис

width: length | percentage | auto

Значения

Вы можете использовать любое допустимое значение длины как описано в разделе "Единицы измерения" в приложении. Применение опции auto равносильно не включению этого атрибута вообще. А опция percentage обрабатывается с учетом ширины следующего элемента, содержащего данный элемент (часто это — окно броузера).

Примеры

#velourTop{width:350px;}

z-index

Устанавливает положение позиционируемого элемента в стеке. Значение по умолчанию для всех слоев — нуль, и слои с одинаковым значением z-индекса отображаются в соответствии с тем, где они находятся в коде. Поэтому слои, которые появляются в коде в последнюю очередь, отображаются над слоями, появившимися ранее.

Синтаксис

z-index: integer | auto

Значения

Допустимы любые значения целого числа хпьедег, даже отрицательные. Применение опции auto равносильно применению нуля.

Примеры

#superModel{z-index:4;}
#designer{z-index:10;}