Позиционирование

Относительное позиционирование (position relative)

В чем смысл такого позиционирования? Это значение не нарушает нормальный поток, элемент остается в нормальном потоке, но этот элемент можно спозиционировать куда угодно. Position relative можно поставить любому элементу: строчному, блочному, элементу списка, таблицы. Это не изменит сути элемента. Свойство display у него останется таким же. Но теперь можно сдвинуть элемент относительно его текущего положения.

Рассмотрим пример:

#r{
   float:left;
   width:200px;
   height:200px;
   margin:10px;
   position:relative;
   left:400px;
   right:-600px;}

Здесь с помощью правил left-right-top-bottom задаем смещение элемента относительно его текущего положения. Left — относительно левой стороны вправо, right — относительно правой стороны влево. При смещении элемента, текст в документе не смещается, элементы контента никак не реагируют на это. Одновременно указывать правило left и right нельзя, будет конфликт, при этом будет учитываться только left.

Для чего нужно правило position:relative? Для исправления ситуации со стэком в IE (internet explore), т.е. проблем видимости. Но также большое значение имеет его связка с абсолютным позиционированием.

Абсолютное позиционирование (position absolute)

Если у элемента задано абсолютное позиционирование, то

• представление у него становится блочным, по таким же правилам, как и у float. Т.е. элемент становится либо display-table, либо display-block.
• Размеры такого элемента определяются его контентом.
• Элементы с position:absolute не замечают и не влияют на другие элементы, кроме элемента html.
• Элемент не участвует в схеме margin:collapse, т.е. он никому не передает свой margin, и ему никто не передает свой margin.
• Приобретает свойство float:none, т.е. не существует абсолютно спозиционированных плавающих элементов — это не имеет смысла.
• Высоту элемента можно указывать в процентах % от высоты контейнера , в отличие от относительного позиционирования.

#out{
   position:absolute;
   }

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

Но как использовать позиционирование относительно других элементов? Чтобы не нарушить ход всей остальной страницы, элемент, относительно которого я хочу позиционировать, должен остаться в нормальном потоке, и в то же время предоставить свою область для контейнера этого абсолютно спозиционируемого элемента. Для такой задачи используют position:relative. Пример:

body{
   position:relative}
#out{
   heiht:200px;
   left:5;
   top:5;
   position:absolute}

Т.е. здесь элементу body задаем относительное позиционирование, и тогда элемент попадет внутрь области (контейнер) body и спозиционируется внутри него, т.е. относительно него.

Фиксированное позиционирование (position fixed)

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

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

Для чего это используется? Это применяется для элементов, которые должны оставаться в видимости при любом случае. Пример: закладка — онлайн консультация на сайте, чат, элементы панели управления (интерфейса) и др. Т.е. они всегда стоят на своем месте, даже при прокрутке страницы.

В качестве контейнера не могут выступать элементы таблиц. Т.е. вся начинка таблиц не может предстявлять область для padding-box, не может «работать» как контейнер. Внимание! В браузере Internet Explore это не работает!

---