CSS свойство top
CSS свойство top задаёт верхнюю позицию элемента в сочетании со свойством position. Примеры и живые демо.
CSS свойство top задаёт вертикальное положение позиционированного элемента, отсчитываемое от верхнего края опорного блока. Само по себе оно ничего не делает — эффект проявляется лишь тогда, когда элемент имеет значение position, отличное от значения по умолчанию static.
На этой странице объясняется, как top работает для каждого значения position, какие единицы измерения можно использовать, типичные ошибки, а также как оно взаимодействует со свойствами bottom, left и right.
Как работает top
Опорный блок, от которого отсчитывается top, и смысл смещения зависят от значения position элемента:
position: absoluteилиfixed—topсмещает элемент от верхнего края его содержащего блока (дляabsolute— ближайшего позиционированного предка; дляfixed— viewport). Большее значениеtopсдвигает элемент ниже.position: relative—topсдвигает элемент вниз относительно его нормального положения, не влияя на расположение окружающих элементов. Место, которое элемент изначально занимал, сохраняется.position: sticky—topзадаёт расстояние от верха контейнера прокрутки, при котором элемент «прилипает» во время скроллинга.top: 0закрепляет его у самого верха.position: static—topполностью игнорируется. Это значение по умолчанию, поэтому сначала всегда устанавливайтеposition.
Если у абсолютно позиционированного элемента с height: auto заданы и top, и bottom, элемент растягивается для выполнения обоих условий; в противном случае top имеет приоритет, а bottom игнорируется.
Отрицательные значения допустимы — top: -20px выдвигает абсолютно или фиксированно позиционированный элемент выше опорного края, а относительно позиционированный — выше его нормального положения.
| Начальное значение | auto |
|---|---|
| Применяется к | Позиционированным элементам. |
| Наследуется | Нет. |
| Анимируется | Да. |
| Версия | CSS2 |
| DOM Синтаксис | Object.style.top = "50px"; |
Синтаксис
Синтаксис CSS свойства top
top: auto | length | initial | inherit;Пример свойства top:
Пример CSS свойства top со значением length
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 0;
}
.ex2 {
top: 50px;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Результат
Пример свойства top с отрицательным значением:
Пример CSS свойства top с отрицательным значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #666;
height: 200px;
position: relative;
}
p {
margin: 0;
color: #fff;
}
.top {
position: absolute;
top: -35px;
color: #000000;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p>Some text.</p>
<p class="top">Text with the top property.</p>
</div>
</body>
</html>Пример свойства top с единицами "pt", "%" и "em":
Пример свойства top со значениями "pt", "%" и "em":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 5em;
}
.ex2 {
top: 10pt;
}
.ex3 {
top: 75%;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
<p class="ex3">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Значения
| Значение | Описание | Демо |
|---|---|---|
| auto | Устанавливает позицию верхнего края. Это значение по умолчанию. | Play it » |
| length | Задаёт позицию верхнего края в px, cm и т.д. Отрицательные значения допустимы. | Play it » |
| % | Задаёт позицию верхнего края в % от высоты содержащего элемента. Отрицательные значения допустимы. | Play it » |
| initial | Устанавливает свойство в значение по умолчанию. | Play it » |
| inherit | Наследует свойство от родительского элемента. |
При использовании процентного значения оно вычисляется относительно высоты содержащего блока, а не его ширины. Таким образом, top: 50% на абсолютно позиционированном элементе сдвигает его вниз на половину высоты родителя.
Типичные ошибки
- Забытое
position.topне действует наstatic-элемент. Если смещение кажется проигнорированным, убедитесь, чтоpositionзадан какrelative,absolute,fixedилиsticky. - Отсутствующий позиционированный предок.
absolute-элемент отсчитывается от ближайшего позиционированного предка. Если такого нет, отсчёт ведётся от исходного содержащего блока (корневого блока размером с viewport). Добавьте родителюposition: relative, чтобы ограничить его. stickyне прилипает.position: stickyработает только пока элемент прокручивается внутри предка, у которого действительно есть переполнение. Значениеtopбез прокручиваемого контейнера или родитель сoverflow: hiddenприведут к тому, что эффект не проявится.- Одновременное использование
topиbottom. Наauto-высотном абсолютном элементе они растягивают его; в противном случаеtopимеет приоритет, аbottomигнорируется.
Связанные свойства
- position — необходимо для вступления
topв силу. - bottom, left, right — остальные свойства смещения, используемые совместно с
topдля позиционирования элементов. - z-index — управляет порядком наложения при перекрытии позиционированных элементов.