CSS :: Свойство top

css-свойство top (от англ. top – верх, верхний) определяет смещение позиционированного элемента по вертикали, в зависимости от значения свойства position, применяемого к элементу:

position: absolute – элемент удаляется из общего потока документа (при этом другие элементы занимают его место), а затем смещается на указанную величину относительно верхней стороны области содержимого позиционированного родительского элемента (значение свойства у него не должно быть static) или, в случае отсутствия такового, относительно верхней стороны области содержимого первого позиционированного элемента-предка. Если же для данного элемента не найдется и позиционированного элемента-предка, то смещение будет происходить относительно верхней стороны области содержимого окна браузера (фрейма).
position: fixed – элемент удаляется из общего потока документа (при этом другие элементы занимают его место), а затем смещается на указанную величину относительно верхней стороны области содержимого окна браузера (фрейма).
position: relative – элемент остается в общем потоке документа (соответственно его место не будет занято другими элементами из потока) и смещается на указанную величину относительно исходного положения верхней стороны области содержимого элемента.
position: static – применение к элементу свойства top не даст никакого эффекта.

Характеристики

Значение по умолчанию: auto.
Применяется: к позиционированным элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.top="value".

Синтаксис

top: <размер> | <проценты> | auto

Значения

auto – положение позиционированного элемента не изменяется.
размер – принимаются любые единицы измерения (смотреть), используемые в CSS. При этом положительные значения смещают элемент вниз, отрицательные – вверх.
проценты – значение в процентах, которое рассчитывается относительно высоты родительского элемента. При этом положительные значения смещают элемент вниз, отрицательные – вверх.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-position-3/#propdef-top

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/top

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>

		div{
		position: relative;
		width: 500px;
		height: 300px;
		margin-top: 5em;
		padding: 10px;		
		border: solid 5px blue;
		}

		p{
		top: 30px; 
		width: 400px;
		height: 70px;		
		margin: 10px;
		padding: 1em;
		border: solid 5px green;
		background-color: yellow;
		}
		
		.pos_1{
		position: fixed; 
		}
		
		.pos_2{
		position: static; 
		}
		
		.pos_3{
		position: relative; 
		}
		
		
		.pos_4{
		position: absolute; 
		}		
	
	</style>
	
</head>
<body>

	<div>
		<p style="background-color: violet"></p>
		
		<p class="pos_1">
			position: fixed;<br> 
			top: 30px; 
		</p>
	</div>

	<div>
		<p style="background-color: violet"></p>
		
		<p class="pos_2">
			position: static;<br> 
			top: 30px; 
		</p>
	</div>

	<div>		
		<p style="background-color: violet"></p>

		<p class="pos_3">
			position: relative;<br> 
			top: 30px; 				
		</p>
	</div>

	<div>		
		<p style="background-color: violet"></p>

		<p class="pos_4">
			position: absolute;<br> 
			top: 30px; 				
		</p>	
	</div>
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №2</title>
	
	<style>

		div{
		position: relative;
		width: 500px;
		height: 250px;
		margin-top: 5em;
		padding: 10px;		
		border: solid 5px blue;
		}

		/* Используем отрицательные значения в процентах */
		p{
		top: -15%; 
		width: 400px;
		height: 70px;		
		margin: 10px;
		padding: 1em;
		border: solid 5px green;
		background-color: yellow;
		}
		
		.pos_1{
		position: fixed; 
		}
		
		.pos_2{
		position: static; 
		}
		
		.pos_3{
		position: relative; 
		}
		
		
		.pos_4{
		position: absolute; 
		}		
	
	</style>
	
</head>
<body>

	<div>
		<p style="background-color: violet">
			Абзац с position: fixed; будет <br>
			находиться вверху за пределами страницы.
		</p>	
		
		<p class="pos_1">
			position: fixed;<br> 
			top: -15%;
		</p>
	</div>

	<div>
		<p style="background-color: violet"></p>

		<p class="pos_2">
			position: static;<br> 
			top: -15%; 
		</p>
	</div>

	<div>		
		<p style="background-color: violet"></p>

		<p class="pos_3">
			position: relative;<br> 
			top: -15%; 				
		</p>
	</div>

	<div>		
		<p style="background-color: violet"></p>

		<p class="pos_4">
			position: absolute;<br> 
			top: -15%; 			
		</p>	
	</div>
	
</body>
</html>

Пример №2