Обзор
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, в то время как заданное для него значение игнорируется.