CSS свойство top
Определение и применение
CSS свойство top указывает направление смещения позиционированного элемента от верхнего края.
Попробуйте top в
тренажёре позиционирования: меняйте отступы, наблюдайте прокрутку и решайте практические задания.
Результат применения свойства top напрямую зависит от позиционирования элемента к которому оно
применяется, т.е. элемент будет смещаться в зависимости от значения свойства
position:
top: 24px при разных значениях position. Остальные смещения — auto,
margin: 0.
Смещение от исходного места; пунктир показывает сохранённое место в потоке.
Отступ от края содержащего блока — здесь позиционированного родителя.
Отступ от края области просмотра; схема изображает окно браузера.
Смещение не применяется: элемент остаётся в обычном потоке.
Схемы условные: рамка для fixed изображает область просмотра. Преобразованный предок может стать
содержащим блоком и для fixed.
-
relative: положительное значениеtopсмещает элемент вниз относительно его исходного места. Место в потоке сохраняется. -
absolute:topзадаёт отступ от соответствующего края содержащего блока. На схеме его создаёт родитель сposition: relative; внешние отступы дочернего элемента равны нулю. -
fixed: в обычном случае отступ отсчитывается от края области просмотра. При прокрутке элемент остаётся на этом месте. static: свойствоtopне действует.
Для absolute отсчёт ведётся от содержащего блока: его может создать не только позиционированный предок,
но и, например, transform. Без такого предка используется начальный содержащий блок, а не закрепление к
окну как при fixed. Для fixed преобразованный предок тоже может заменить окно отсчёта. При
sticky смещение задаёт порог прилипания внутри ближайшей области прокрутки.
Попробуйте значения top
Элемент имеет position: absolute, а контейнер — relative. Меняется отступ от соответствующего края. auto оставляет автоматическое положение; проценты зависят от размера контейнера.
top: auto
HTML и CSS примера
<div class="stage">
<div class="demo-target">Блок</div>
</div>
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 200px;
position: relative;
border: 2px dashed #607589;
padding: 12px;
background: #edf2f5;
color: #172c3d;
font: 16px/1.5 system-ui;
}
.demo-target {
padding: 10px;
border: 2px solid #245a85;
background: #ffe4bd;
position: absolute;
width: 90px;
height: 60px;
top: auto;
}
.neighbor {
padding: 8px;
background: #b9d7eb;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 200px;
position: relative;
border: 2px dashed #607589;
padding: 12px;
background: #edf2f5;
color: #172c3d;
font: 16px/1.5 system-ui;
}
.demo-target {
padding: 10px;
border: 2px solid #245a85;
background: #ffe4bd;
position: absolute;
width: 90px;
height: 60px;
top: 0;
}
.neighbor {
padding: 8px;
background: #b9d7eb;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 200px;
position: relative;
border: 2px dashed #607589;
padding: 12px;
background: #edf2f5;
color: #172c3d;
font: 16px/1.5 system-ui;
}
.demo-target {
padding: 10px;
border: 2px solid #245a85;
background: #ffe4bd;
position: absolute;
width: 90px;
height: 60px;
top: 24px;
}
.neighbor {
padding: 8px;
background: #b9d7eb;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 200px;
position: relative;
border: 2px dashed #607589;
padding: 12px;
background: #edf2f5;
color: #172c3d;
font: 16px/1.5 system-ui;
}
.demo-target {
padding: 10px;
border: 2px solid #245a85;
background: #ffe4bd;
position: absolute;
width: 90px;
height: 60px;
top: 50%;
}
.neighbor {
padding: 8px;
background: #b9d7eb;
}
Поддержка браузерами
Спецификация: CSS position
Поддерживается во всех основных браузерах с 2015 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
top | 1 | 12 | 1 | 6 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 | 1 |
anchor | 125 | 125 | 147 | 111 | 26 | 125 | 147 | 83 | 26 | 27.0 | 125 | 26 |
anchor-size | 132 | 132 | 147 | 117 | 26 | 132 | 147 | 87 | 26 | 29.0 | 132 | 26 |
auto | 1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 | 1 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
CSS синтаксис:
top: auto | <length-percentage> | <anchor()> | <anchor-size()>;
/* Глобальные значения */
top: initial | inherit | unset | revert | revert-layer;| — выбор варианта.
JavaScript синтаксис:
element.style.top = "-100px";Начальное значение свойства
auto.
Значения свойства
| Значение | Описание |
|---|---|
auto |
Позволяет браузеру вычислять положение от верхнего края. Начальное значение. |
length |
Определяет величину смещения (px, em, pt, и т.п.). Допускается использование отрицательных значений. |
% |
Процент от высоты содержащего блока. Это не обязательно непосредственный родитель в HTML. Отрицательные значения допустимы. |
anchor() |
Положение стороны якорного элемента, например anchor(top). Действует только при якорном
позиционировании; поддержку проверяйте отдельно.
|
anchor-size() |
Размер якорного элемента, например anchor-size(width). Требует подходящего якоря; поддержку
проверяйте отдельно.
|
initial
|
Устанавливает начальное значение свойства. |
inherit
|
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства top устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Спецификация
CSS Anchor Positioning — спецификация top.
Наследуется
Нет.
Анимируемое
Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.
Примеры, попробуйте сами
Смещение от края контейнера
Измените top: 20px на 0 или 40px. Блок с position: absolute отсчитывает смещение от ближайшего позиционированного предка.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.5 system-ui,
sans-serif;
color: #172c3d;
}
section {
margin-bottom: 24px;
min-width: 0;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
}
.item {
padding: 8px;
min-width: 0;
background: #c5dbea;
border: 1px solid #35658a;
overflow-wrap: anywhere;
}
.scene {
border: 1px dashed #8495a5;
}
.sample {
padding: 16px;
background: #c5dbea;
}
index.html
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Смещение от края контейнера</title>
</head>
<body>
<div class="scene"><div class="sample">Блок</div></div>
</body>
</html>
style.css
.scene {
position: relative;
height: 180px;
}
.sample {
position: absolute;
top: 20px;
}
Тони готовит пример…