top

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

Интерактивный пример

Эффект свойства top зависит от того, как позиционируется элемент (то есть от значения свойства position):

Когда задано position: absolute или fixed — значение свойства top устанавливается как расстояние между верхней гранью элемента и верхней гранью родительского контейнера.
Когда задано position: relative — значение свойство top устанавливается как расстояние, на которое смещается верхний край элемента от нормальной позиции.
Когда задано position: sticky — свойство top работает так, как при position: relative во время нахождения элемента внутри области просмотра, и как position: fixed вне области просмотра.
Когда задано position: static — свойство top не имеет никакого эффекта.

Когда заданы оба свойства top и bottom, а свойство position установлено как absolute или fixed, то оба свойства top и bottom учитываются. Во всех остальных ситуациях, если height как-либо ограничена или position установлено как relative, то свойство top будет учтено, а bottom — проигнорировано.

Синтаксис

css

/* Значения величин */
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.

Формальный синтаксис

top = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-element>?               &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )  

<anchor-element> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Пример

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;
}

html

<?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>

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

Specification
CSS Positioned Layout Module Level 3 # insets

Совместимость с браузерами

BCD tables only load in the browser