Абсолютное и относительное позиционирование
- 29 мая 2014
Относительное позиционирование
Относительное позиционирование
Относительное позиционирование заключается в смещении элемента в потоке, относительно его начального положения.
Позиция элемента вычисляется с помощью свойств top, bottom, left, right.
При этом элемент продолжает занимать исходный участок страницы, не смотря на визуальное смещение (освободившееся место никто не занимает).
В данном примере использовано смещение вверх зачет отрицательного значения свойства top. Если сдвинуть блок вверх за счет отрицательного внешнего отступа margin-top: -50px; - элемент реально смещается, освобождая пространство для следующих за ним элементов.
Если при относительном позиционировании не задавать значения позиции, то такой контейнер ничем не будет отличаться от обычного. Этим можно пользоваться, чтобы в дальнейшем, в случае необходимости, можно было сместить элемент с помощью свойств позиционирования, а не отступов. Или разместить внутри абсолютно позиционированный элемент.
При наслоении контейнеров на переднем плане находится тот контейнер, у которого больше z-index. Свойство может принимать в качестве значений любые целые числа (в том числе отрицательные). Если известно, что элемент всегда должен находиться на поверхности, лучше задать значение побольше, с запасом, например: z-index: 9999;
Информация
В плавающих элементах, чтобы предотвратить схлопывание родительского контейнера, для него иногда задают свойство overflow: hidden; . Это имеет один побочный эффект. Если с помощью задания соответствующей позиции мы сместим какой либо блок за границы родительского контейнера, то "выступающую часть" просто обрежет.
Абсолютное позиционирование
Если при относительном позиционировании элемент оставался в нормальном потоке, то при абсолютном он извлекается из нормального потока, не занимает в нем места и остальные элементы ведут себя так, как будто абсолютно-позиционированного элемента не существует. Этим он напоминает плавающий элемент.
Контейнер, свойству position которого присвоено значение absolute, смещается вверх и занимает верхний левый угол ближайшего позиционированного элемента, у которого position: absolute | relative.
Если такого не находится, то в качестве контейнера используется страница. Остальные элементы сдвигаются вверх, занимая освободившееся место.
Если вы поместили абсолютно позиционированный блок в не позиционированный контейнер, то ваш блок из контейнера убежит... , если только он не находится в верхнем левом углу страницы. Вот так!
Позиция вычисляется с помощью тех же свойств, что и при относительном позиционировании.
Фиксированное позиционирование
Ну и совсем немного про фиксированное позиционирование, даже не будем выводить отдельной темой.
Это абсолютное позиционирование, с той разницей, что позиция фиксируется относительно экрана. Зафиксированный элемент как-бы плавает в одном и том же месте экрана (как пример - верхняя навигационная панель этого сайта), не смотря на прокрутку страницы.
Браузер IE6 не поддерживает фиксированное позиционирование.