Перейти к содержанию

position

Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Демо

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

Значения

absolute

Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента.

fixed

Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

relative

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

static

Статичное позиционирование. Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

sticky

Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.

Примечание

Браузер Safari поддерживает значение -webkit-sticky.

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

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

Спецификации

Поддержка браузерами

position: fixed:

position: sticky:

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>position</title>
        <style>
            .layer1 {
                position: relative; /* Относительное позиционирование */
                background: #f0f0f0; /* Цвет фона */
                height: 200px; /* Высота блока */
            }
            .layer2 {
                position: absolute; /* Абсолютное позиционирование */
                bottom: 15px; /* Положение от нижнего края */
                right: 15px; /* Положение от правого края */
                line-height: 1px;
            }
        </style>
    </head>
    <body>
        <div class="layer1">
            <div class="layer2">
                <img src="image/girl.jpg" alt="Девочка" />
            </div>
        </div>
    </body>
</html>

Ссылки

Комментарии