CSS свойство top
The CSS top property specifies the top position of an element in combination with the position property. Find examples and try them yourself.
Свойство top задаёт верхнее положение элемента в сочетании со свойством position.
Эффект свойства top зависит от способа позиционирования элемента (см. свойство position).
- Если для position задано значение "absolute" или "fixed", свойство top указывает расстояние в единицах измерения от верхнего края элемента до верхнего края ближайшего позиционированного предка.
- Если для position задано значение "relative", свойство top указывает смещение верхнего края относительно его нормальной позиции.
- Если для position задано значение "sticky", свойство top меняет позиционирование на relative, когда элемент находится в пределах области просмотра, и на fixed, когда выходит за её пределы.
- Если для свойства position задано значение "static", оно не применяется.
info
Допускаются отрицательные значения.
| Начальное значение | auto |
|---|---|
| Применяется к | Позиционированные элементы. |
| Наследуется | Нет. |
| Анимация | Да. |
| Версия | CSS2 |
| Синтаксис DOM | Object.style.top = "50px"; |
Синтаксис
Синтаксис свойства CSS top
top: auto | length | initial | inherit;Пример использования свойства top:
Пример свойства CSS top со значением длины
<!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 | Задаёт позицию верхнего края. Это значение по умолчанию для данного свойства. | Запустить » |
| length | Задаёт позицию верхнего края в px, см и т.д. Допускаются отрицательные значения. | Запустить » |
| % | Задаёт позицию верхнего края в % от размера содержащего элемента. Допускаются отрицательные значения. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует значение свойства от родительского элемента. |
Практика
Практика
Что делает CSS-свойство 'top'?