MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

top

Обзор

CSS свойство top частично определяет позицию спозиционированных (свойство position отлично от static) элементов. Оно не повлияет на неспозиционированные элементы.

Для абсолютно спозиционированных элементов (которые с position: absolute или position: fixed), оно определяет расстояние между верхней границей поля элемента и верхней границей родительского блока.

Для относительно спозиционированных элементов (которые с position: relative), оно определяет расстояние, на которое элемент сместится вниз от своего текущего положения.

Когда оба свойства top and bottom определены и свойство height не задано, auto или 100%, оба свойства top и bottom учитываются.Если свойство height задано, свойство top будет учтено, а bottom - проигнорировано.

Начальное значениеauto
Применяется кпозиционированные элементы
Наследуетсянет
Процентыотносятся к высоте содержащего блока
Отображениевизуальный
Обработка значенияесли указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае auto
Animation typeдлина, проценты или calc();
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Значения величин */
top: 3px;
top: 2.4em;

/* Процентные значения от высоты родительского блока */
top: 10%;

/* Ключевое слово */
top: auto;

/* Глобальные значения */
top: inherit;
top: initial;
top: unset;

Значения

<length>
Отрицательное, нулевое или положительное <length> которое представляет:
  • для абсолютно спозиционированных элементов, расстояние от верхнего края родительского блока;
  • для относительно спозиционированных элементов, расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.
<percentage>
Это значение в % от высоты родительского блока, используется, как описано в обзоре.
auto
Это ключевое слово, которое означает:
  • для абсолютно спозиционированных элементов, позицию элемента на основании bottom свойства и height: 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, в то время как заданное для него значение игнорируется.

Метки документа и участники

 Внесли вклад в эту страницу: J-N-Z
 Обновлялась последний раз: J-N-Z,