Веб-школа



Позиционирование порой удивляет!

Задавайте элементы, которые должны быть на первом плане!

Элементы могут перекрываться!

Перед ознакомлением с типами позиционирования я хотел бы познакомить вас с понятием «нормальный (обычный) поток элементов«.

Нормальный поток элементов — это отображение элементов соответственно их месту в коде. То есть если в этом примере:

Это заголовок

А это параграф

заголовок второго уровня находится выше параграфа, то при нормальном потоке элементов он и будет отображаться выше, чем параграф. В случаях, когда меняется положение каких-либо элементов, говорят, что элемент вырван из нормального потока элементов.

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

Элемент можно позиционировать, используя свойства top, bottom, left и right. Однако, эти свойства не будут действовать, если не указано свойство position. Действие этих свойств зависит от значения свойства position (тип позиционирования).

В CSS существуют четыре типа позиционирования.

Статическое позиционирование

Статическое позиционирование применяется к элементам по умолчанию. Статически позиционированный элемент занимает в разметке место соответсвенно своему положению в html-коде.

На статически позиционированный элемент не действуют свойства top, bottom, left и right.

Фиксированное позиционирование

Фиксированно позиционированный элемент позиционируется относительно окна браузера.

Он не двигается при прокрутке страницы:

p.pos_fixed { position:fixed; top:30px; right:5px;

}

Посмотреть

Заметка: Internet Explorer поддерживает фиксированное позиционирование только если указан !DOCTYPE.

Фиксированно позиционированные элементы освобождают свое место в разметке и располагаются там, где вы укажете. Оставшиеся элементы ведут себя так, словно фиксированно позиционированного элемента нет, то есть занимают его нормальное местоположение.

Фиксированно позиционированные элементы могут перекрывать другие элементы.

Относительное позиционирование

Относительно позиционированные элементы занимают положение относительно своего нормального местоположения.

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px;

}

Посмотреть

Содержимое относительно позиционированного элемента может перекрывать другие элементы, но место, зарезервированное под этот элемент остается свободным, то есть существуют как бы две копии относительно позиционированного элемента: одна видимая (занимает местоположение согласно позиционированию) , другая — невидимая, находящаяся в том месте, где она должна нормально располагаться.

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

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

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

h2 { position:absolute; left:100px; top:150px;

}

Посмотреть

Абсолютно позиционированные элементы освобождают свое нормальное местоположение следующим за ними элементам.

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

Перекрывание элементов

Когда элемент вырывается из нормального местоположения, он может перекрывать другие элементы.

Свойство z-index определяет положение элемента в третьем измерении (какой элемент должен быть на переднем плане, какой на втором и так далее). z-index может иметь как положительные, так и отрицательные значения:

img { position:absolute; left:0px; top:0px; z-index:-1

}

Посмотреть

Элемент, имеющий большее значение z-index, всегда находится над другими элементами (то есть элемент с z-index:2 будет перекрывать элемент с z-index:1).

Заметка: если два элемента не имеют z-index, при этом могут перекрыть друг друга, тогда на переднем плане будет отображаться тот элемент, который идет последним в html-коде.

Позиционирование элементов — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).