html.okpython.net
HTML и CSS для начинающих

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

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

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

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

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

Синтаксис

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

Значения

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

Ссылки

Примеры

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{
		left: 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> 
			left: 30px; 
		</p>
	</div>

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

	<div>		
		<p style="background-color: violet"></p>
		
		<p class="pos_3">
			position: relative;<br> 
			left: 30px; 				
		</p>
	</div>

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

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

	<div>
		<p style="background-color: violet"></p>
		
		<p class="pos_2">
			position: static;<br> 
			left: -15%; 
		</p>
	</div>

	<div>		
		<p style="background-color: violet"></p>
		
		<p class="pos_3">
			position: relative;<br> 
			left: -15%; 				
		</p>
	</div>

	<div>		
		<p style="background-color: violet"></p>
		
		<p class="pos_4">
			position: absolute;<br> 
			left: -15%; 			
		</p>	
	</div>
	
</body>
</html>		

Пример №2