Позиционирование элементов

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

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

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

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

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

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

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

#example  {

position:fixed;

}

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

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

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

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

#example  {

position:relative;

}

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

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

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

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

#example  {

position:absolute;

}

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

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

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

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

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

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

Меню для сайта

Здесь я приведу необходимый код для создания меню. С html всё просто, создаём список пунктов меню. А вот чтобы лучше понимать, как работает то или иное свойство в css, рекомендую писать код построчно, т.е после написания каждого свойства, смотреть в браузере изменения.

Вертикальное меню

HTML	CSS
<ul> <li><a href="#">Первый пункт</a></li> <li><a href="#">Второй пункт</a></li> <li><a href="#">Третий пункт</a></li> <li><a href="#">Четвертый пункт</a></li> </ul>>	ul{ list-style: none; margin:0; padding:0; font-size:14px; } ul li{ margin-bottom:10px; } ul li a{ padding: 4px; text-decoration: none; color: #666; } ul li:hover a, ul li a:hover{ background: #999; color: #fff; }