Позиционирование

Дает возможность размещения элементов не по расположению их в коде, а конкретными координатами относительно родительского контейнера или всей страницы.

Свойства:

position - устанавливает откуда брать точки отсчета при позиционировании.

Данный атрибут обязательно должен быть указан, иначе все нижеперечисленные в этой статье свойства не будут работать.

Примеры:

position: absolute;  //  Отсчет берется относительно всей страницы

position: relative;  //  Отсчет берется относительно родительского контейнера

position: fixed;  //  Элемент не меняет своего положения даже при прокрутке

position: static;  //  Элемент отображается как и расположен в кодеЗначение по умолчанию - static

top - определяет место расположения элемента от верхней границы контейнера.

Значения указываются всеми принятыми измерениями в CSS

Пример:

top: 20px;  //  Элемент располагается на расстоянии 20 пикселей от верха

left - определяет место расположения элемента от левой границы контейнера.

Значения указываются всеми принятыми измерениями в CSS

Пример:

left: 30px;  //  Элемент располагается на расстоянии 30 пикселей слева

right - определяет место расположения элемента от правой границы контейнера.

Значения указываются всеми принятыми измерениями в CSS

Пример:

right: 40px;  //  Элемент располагается на расстоянии 40 пикселей справа

bottom - определяет место расположения элемента от нижней границы контейнера.

Значения указываются всеми принятыми измерениями в CSS

Пример:

bottom: 50px;  //  Элемент располагается на расстоянии 50 пикселей от низа

z-index - при перекрывании элемента другими определяет какой из них будет находится выше.

Значения указываются целыми числами. Например элемент со значением 5 перекрывает элемент со значением 4 и меньше.

Примеры:

z-index: 10;  //  Элемент перекрывает другие, у которых значение 9 и меньше

z-index: auto;  //  Элементы перекрываются относительно расположения в коде

Значение по умолчанию - auto