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

top

Свойство top для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1).

Рис. 1. Значение top относительно окна браузера

В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).

Рис. 2. Значение top относительно родителя

Демо

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

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* <length> values */
top: 3px;
top: 2.4em;

/* <percentage>s of the height of the containing block */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: unset;

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

auto

Не изменяет положение элемента.

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

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

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

Пример

 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>top</title>
        <style>
            .menu {
                position: absolute; /* Абсолютное позиционирование */
                left: 300px; /* Положение от левого края */
                top: 50px; /* Положение от верхнего края */
                width: 120px; /* Ширина блока */
                background: #e0e0e0; /* Цвет фона */
                border: 1px solid #000; /* Параметры рамки */
                padding: 5px; /* Поля вокруг текста */
            }
            .content {
                position: absolute; /* Абсолютное позиционирование */
                left: 0; /* Положение от левого края */
                top: 0; /* Положение от верхнего края */
                width: 280px; /* Ширина блока */
                background: #00a5b6; /* Цвет фона */
                color: white; /* Цвет текста */
                padding: 5px; /* Поля вокруг текста */
                padding-right: 60px; /* Отступ справа */
                text-align: justify; /* Выравнивание по ширине */
            }
        </style>
    </head>
    <body>
        <div class="content">
            Lorem ipsum dolor sit amet, consectetuer
            adipiscing elit, sed diem nonummy nibh euismod
            tincidunt ut lacreet dolore magna aliguam erat
            volutpat. Ut wisis enim ad minim veniam, quis
            nostrud exerci tution ullamcorper suscipit
            lobortis nisl ut aliquip ex ea commodo
            consequat. Duis te feugifacilisi.
        </div>
        <div class="menu">
            Ut wisi enim ad minim veniam, quis nostrud
            exerci taion ullamcorper suscipit lobortis nisl
            ut aliquip ex en commodo consequat.
        </div>
    </body>
</html>

Комментарии