top

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

* Some parts of this feature may have varying levels of support.

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

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

top: 0;

top: 4em;

top: 10%;

top: 20px;

<section>  <div>    <div>I am absolutely positioned.</div>    <p>      As much mud in the streets as if the waters had but newly retired from the      face of the earth, and it would not be wonderful to meet a Megalosaurus,      forty feet long or so, waddling like an elephantine lizard up Holborn      Hill.    </p>  </div></section>

.example-container {  border: 0.75em solid;  padding: 0.75em;  text-align: left;  position: relative;  width: 100%;  min-height: 200px;}#example-element {  background-color: #264653;  border: 4px solid #ffb500;  color: white;  position: absolute;  width: 140px;  height: 60px;}

Эффект свойства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-name>?&&
<anchor-side> ,<length-percentage>?)

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

<anchor-name> =
<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>