16. Свойство position


АБ

Обычно элементы Web-страницы позиционируются относительно предыдущих элементов в коде HTML. Мы будет рассматривать свойство position, которое позволяет выполнять позиционирование элемента независимо от предшествующего кода, или, говоря другими словами, отдельно от потока документа. У свойства position могут быть следующие значения:

static

Отвечает размещению объектов в том порядке, в котором они встречаются в коде документа . Значение static используется по умолчанию.

absolute

Элемент с этим значением свойства position помещается в видимую область, а сама область имеет определенные координаты, которые не зависят от расположения других элементов. Вместе с перемещением видимой области перемещается и содержимое. Если внутри видимой области какой-либо элемент получает координаты, выходящие за пределы области, то этот элемент не показывается.

relative

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

Если вы хотите сделать позиционирование какого-нибудь элемента, то в определении свойств нужно записать position: любое_значение_из_вышеперечисленных; а дальше координаты (left: 200; top: 100 например). Можете еще указывать width, height и т.д.

Например, если прописать такой код:

H3.examp { color: ffffff; position: absolute; left: 200; right: 100; top: 50; height: 30; background: blue; width:50;}

то заголовок H3 класса examp будет выглядеть так же, как буквы АБ на этой странице. А если указать position: relative и расположить элемент после текста этого абзаца, то посмотрите сами что получится.

123

>
>
>
Надеюсь, что общий принцип позиционирования вам понятен.

.: CONTENTS :.

Гостевая книга

Учебник по CSS. Справочник. Для чайников.

(назад) - Стили фрагментов текста

(вперед) - Размещение текстовых блоков в документе






  Яндекс.Метрика
Hosted by uCoz