Содержание
Относительное позиционирование (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 это не работает!