CSS свойство top
Свойство 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
css
top: auto | length | initial | inherit;Пример использования свойства top:
Пример свойства CSS top со значением длины
html
<!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 со значением со знаком минус
html
<!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":
html
<!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'?