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

css-свойство position (от англ. position – расположение) определяет порядок расположения элементов относительно окна браузера, других элементов на веб-странице или относительно текущего местоположения элемента. Данное свойство используется в комбинации со свойствами left, right, top и bottom, которые определяют относительное смещение позиционированного элемента.

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

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

Синтаксис

position: absolute | fixed | relative | static

Значения

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

Ссылки

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

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

Примеры

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: -2em;
		left: 70px; 
		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">
			<br>
			position: fixed;<br> 
			top: -2em;<br>
			left: 70px;  
		</p>
	</div>

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

		<p class="pos_2">
			position: static;<br> 
			top: -2em;<br>
			left: 70px;  
		</p>
	</div>

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

		<p class="pos_3">
			position: relative;<br> 
			top: -2em;<br>
			left: 70px; 				
		</p>
	</div>

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

		<p class="pos_4">
			position: absolute;<br> 
			top: -2em;<br>
			left: 70px; 			
		</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: 300px;
		margin-top: 5em;
		padding: 10px;		
		border: solid 5px blue;
		}

		/* Используем отрицательные значения и проценты */
		p{
		right: -15%;
		bottom: 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"></p>

		<p class="pos_1">
			position: fixed;<br> 
			right: -15%;<br>
			bottom: 15%;  
		</p>
	</div>

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

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

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

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

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

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

Пример №2