CSS свойство top
частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. top
не применится, если задано position: static
).
Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Эффект свойства top
зависит от того, как позиционируется элемент (то есть от значения свойства position
):
- Когда задано
position: absolute
илиfixed
— свойствоbottom
устанавливает расстояние между нижним краем элемента и нижним краем содержащего его блока. - Когда задано
position: relative
— свойствоbottom
устанавливает расстояние, на которое нижний край элемента перемещается выше его обычной позиции. - Когда задано
position: sticky
— свойствоbottom
работает так, как приposition: relative
во время нахождения элемента внутри области просмотра, и какposition: fixed
вне области просмотра. - Когда задано
position: static
— свойствоbottom
не имеет никакого эффекта.
Когда заданы оба свойства top
и bottom
, а свойство height
не задано, auto
или равно 100%
, то оба свойства top
и bottom
учитываются. Если свойство height
задано, то свойство top
будет учтено, а bottom
— проигнорировано.
Синтаксис
/* Значения величин */ top: 3px; top: 2.4em; /* Процентные значения от высоты родительского блока */ top: 10%; /* Ключевое слово */ top: auto; /* Глобальные значения */ top: inherit; top: initial; top: unset;
Значения
<length>
- Отрицательная, нулевая или положительная величина, которая представляет:
- для абсолютно позиционируемых элементов &mdash расстояние от верхнего края содержащего их блока;
- для относительно позиционируемых элементов &mdash расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.
<percentage>
- Процент от высоты родительского блока.
auto
- Это ключевое слово, которое означает:
- для абсолютно спозиционированных элементов — позиция элемента опирается на свойство
bottom
, покаheight: auto
обрабатывается как высота в зависимости от содержимого; если так же иbottom: auto
, то элемент располагается так же, как при статическом позиционировании. - для относительно спозиционированных элементов — расстояние элемента от его обычной позиции основано на свойстве
bottom
; если значениеbottom
такжеauto
, элемент вообще не перемещается по вертикали.
- для абсолютно спозиционированных элементов — позиция элемента опирается на свойство
inherit
- Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как
<length>
,<percentage>
или ключевое словоauto
.
Формальный синтаксис
<length> | <percentage> | auto
Пример
/* Для body могут быть использованы единицы px, также и для div */ body{ width: 100%; height: 100%; } /* div теперь может использовать значения в процентах (body ширина и высота установлены) */ div { position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; }
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml" /> <title>Mozilla.org height top left width percentage CSS</title> <style type="text/css"> /* Для body могут быть использованы единицы px, также и для div */ body { width: 100%; height: 100%; } /* div теперь может использовать значения в процентах (body ширина и высота установлены) */ div { position: absolute; left: 15%; top: 30%; bottom: 30%; width: 70%; height: 40%; text-align: left; border: 3px rgb(0,0,0) solid; } </style> </head> <body> <center> <div> ...Some content... </div> </center> </body> </html>
Спецификации
Спецификация | Состояние | Комментарий |
---|---|---|
CSS Transitions Определение 'top' в этой спецификации. |
Рабочий черновик | Определяет top как анимируемое |
CSS Level 2 (Revision 1) Определение 'top' в этой спецификации. |
Рекомендация | Initial definition |
Совместимость с браузерами
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Базовая поддержка | (Да) | (Да) | 1.0 (1.7 или ранее) | (Да)[1] | (Да) | (Да) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Базовая поддержка | ? | ? | (Да) | ? | ?[1] | ? | ? |
[1] В Internet Explorer до версии 7.0, когда оба свойства top
и bottom
определены, позиция элемента ограничена и свойство top
имеет приоритет: вычисленное значение bottom
устанавливается как -top
, в то время как заданное для него значение игнорируется.