CSS позиционирование

Цикл статей «CSS учебник».

Следующая статья — «CSS выравнивание».
Предыдущая статья — «CSS отображение и скрытие, блочные и строчные элементы».

За размещение элементов на странице отвечают шесть свойств: position, left, top, right, bottom и z-index.

Свойство position  указывает тип позиционирования.

Существует четыре типа позиционирования:

• статическое позиционирование
• относительное позиционирование
• фиксированное позиционирование
• абсолютное позиционирование

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

Статическое позиционирование задаётся установкой position:static. При этом элементы остаются на тех местах страницы, где они были объявлены. Свойства left, top, bottom, right  не работают со статическим позиционированием. Все элементы по умолчанию размещаются этим способом.

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

Задаётся при помощи position:relative. При относительном позиционировании элементы размещаются относительно своего обычного место. Указание left, top, bottom, right  сдвигает элемент относительно исходной позиции, при этом место для элемента всегда резервируется в том месте, где он был бы расположен при статическом позиционировании. Остальные элементы располагаются так, словно элемент расположен на обычном месте.

Фиксированное положение

Задаётся при помощи position:fixed. Позиция элемента задаётся при помощи left, top, bottom, right  относительно экрана и не меняется при прокрутке страницы. Часто используется для всплывающих pop-up баннеров.

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

Задаётся при помощи position:absolute. Элемент позиционируется абсолютно. Его расположение задаётся с помощью left, top, right, bottom. На положение также влияет значение свойства position  родительского элемента. Если оно равно static или родителя нет, то отсчёт ведётся от края браузера. Если значение position  родителя равно fixed, relative  или absolute, то позиция отсчитывается относительно родительского элемента.

Свойство z-index

С помощью свойства z-index можно указать порядок отображения элементов при наложении их друг на друга. Элемент, у которого стоит большее значение в z-index  будет отображён поверх элемента с меньшим значением z-index.

 
Цикл статей «CSS учебник».

Следующая статья — «CSS выравнивание».
Предыдущая статья — «CSS отображение и скрытие, блочные и строчные элементы».