Обычно элементы 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
>
>
>
Надеюсь, что общий принцип позиционирования вам понятен.
|