Позиционирование элементов в CSS
http://belarusweb.net
Основы создания сайтов

Позиционирование элементов

css-свойства position, left, right, top, bottom

Все браузеры в ходе разбора html-кода и формирования веб-страницы располагают элементы по установленному стандарту, согласно которому блочные элементы располагаются вертикально друг под другом, т.к. по умолчанию они стремятся занять всю доступную в данной ситуации ширину, а строчные элементы наоборот, располагаются горизонтально друг за другом до тех пор, пока не будет занята вся доступная в данной ситуации ширина, после чего браузер делает перенос строки и продолжает располагать строчные элементы друг за другом на новой строке. Однако такой способ расположения элементов на странице далеко не всегда удобен, поэтому в CSS присутствует специальное ненаследуемое свойство position, которое позволяет определять порядок расположения элементов относительно окна браузера, других элементов на веб-странице или относительно текущего местоположения элемента. Данное свойство используется в комбинации со свойствами left, right, top и bottom, которые определяют относительное смещение позиционированного элемента (см. пример №1). В качестве значений эти свойства принимают любые доступные в CSS единицы измерения, включая отрицательные значения. Разрешается использовать проценты, которые у свойств left и right рассчитываются относительно ширины родительского элемента, а у top и bottom относительно высоты родительского элемента. Если указать в качестве значения свойств ключевое слово auto, положение позиционированного элемента не изменится.

Теперь перечислим значения свойства position:

  • static – элемент будет отображаться в том месте, в котором он обычно располагается, находясь в общем потоке документа; применение к элементу свойств left, right, top и bottom не даст никакого эффекта;
  • absolute – элемент будет удален из общего потока документа, а другие элементы займут его место, как будто абсолютно позиционированный элемент вообще отсутствует; применение к элементу свойств left, right, top и bottom приведет к его смещению на указанную величину относительно соответствующей стороны области содержимого позиционированного родительского элемента (значение свойства у него не должно быть static) или, в случае отсутствия такового, относительно соответствующей стороны области содержимого первого позиционированного элемента-предка; если же для данного элемента не найдется и позиционированного элемента-предка, то смещение будет происходить относительно соответствующей стороны области содержимого окна браузера (фрейма);
  • fixed – элемент будет удален из общего потока документа, а другие элементы займут его место, как будто фиксированно позиционированный элемент вообще отсутствует; применение к элементу свойств left, right, top и bottom приведет к его смещению на указанную величину относительно соответствующей стороны области содержимого окна браузера (фрейма), соответственно, при прокрутке содержимого страницы в окне браузера фиксированный элемент будет оставаться на одном и том же месте;
  • relative – элемент останется в общем потоке документа, а применение к элементу свойств left, right, top и bottom приведет к его смещению относительно текущего положения соответствующей стороны области содержимого элемента; при этом его место не будет занято другими элементами из потока, т.к. для них относительно позиционированный элемент как будто остается на прежнем месте (в потоке документа).
HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Позиционирование элементов</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. Использование различных вариантов позиционирования элементов

Наберите код примера в редакторе и попробуйте посмотреть, как изменится положение абзацев, если убрать позиционирование. Затем еще раз перечитайте материал, по ходу чтения пробуя применять к ним указанные варианты позиционирования.

css-свойство z-index

Введение позиционирования значительно облегчило жизнь веб-разработчикам, позволив размещать элементы практически в любом месте веб-документа по своему усмотрению. Однако при использовании позиционирования зачастую происходит наложение элементов друг на друга, что привело к идее введения дополнительного ненаследуемого свойства z-index для регулирования положения позиционированных элементов не только в горизонтальной плоскости вдоль осей х и у, но и по вертикали вдоль оси z, имитируя тем самым третье измерение, перпендикулярное экрану (см. пример №2).

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>z-index</title>
	<style>
		p{
		padding: 1em;
		border: solid 5px red;
		width: 400px;
		height: 200px;
		}
		
		.pos_1{
		position: absolute; 
		z-index: 2;
		top: 20px; 
		left: 20px;
		background-color: yellow;
		}
		
		.pos_2{
		position: absolute; 
		z-index: 3;
		top: 90px; 
		left: 150px;
		background-color: violet;
		}
	</style>
	
</head>
<body>

	<p class="pos_1">
		Позиционирован абсолютно. z-index равен 2.
	</p>
	
	<p class="pos_2">
		Позиционирован абсолютно. z-index равен 3, 
		поэтому данный абзац находится выше, т.е. 
		ближе к нам по оси z.
	</p>
	
</body>
</html>

Пример №2. Использование свойства z-index

В качестве значений свойство принимает целые числа (включая отрицательные). Чем больше значение z-индекса элемента, тем выше он находится по сравнению с элементами, у которых он меньше. Если же элементы имеют одинаковый z-индекс, то на переднем плане будет отображаться элемент, который в html-коде встречается ниже. В качестве значения разрешается также использовать ключевое слово auto, которое присваивает элементу z-индекс родителя.

css-свойство clip

Для абсолютно и фиксированно позиционированных элементов имеется еще одно ненаследуемое свойство clip, определяющее прямоугольную область элемента, в которой содержимое будет видимым. Вся остальная часть обрезается и на странице не показывается (см. пример №3).

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство clip</title>
	
	<style>
		p{
		padding: 5px;
		border: solid 8px red;
		width: 400px;
		height: 150px;
		left: 20px;
		overflow: scroll;
		clip: rect(6px, 385px, 135px, 6px);
		}
		
		.pos_1{
		position: absolute;
		top: 20px;
		background-color: yellow; 
		}
		
		.pos_2{
		position: fixed;
		top: 190px;
		background-color: violet;  
		}
	</style>

</head>
<body>
	<p class="pos_1">
		Позиционирован, как absolute. Отсекаем полосы прокрутки 
		и делаем тоньше границы. 
	</p>
	
	<p class="pos_2">
		Позиционирован, как fixed. Отсекаем полосы прокрутки 
		и делаем тоньше границы.
	</p>
</body>
</html>	

Пример №3. Использование свойства clip

В качестве значений свойство clip принимает:

  • rect(y1,x1,y2,x2) – задает параметры прямоугольной области, в которой содержимое элемента будет видно на странице; через запятую указываются расстояния от края элемента до верхнего, правого, нижнего и левого края оставляемой области (см. рис. №4); при этом расстояния y1 и y2 отсчитываются от верхнего края элемента, соответственно, до верхего и нижнего края оставляемой (видимой) области, а расстояния x1 и x2 отсчитываются от левого края элемента, соответственно, до правого и левого края оставляемой (видимой) области, так что при указании значений следует быть внимательным и следить за тем, чтобы во избежание полной обрезки элемента выполнялись условия y1<y2 и x1>x2; если с какой-то стороны обрезать элемент не требуется, то разрешается использовать ключевое слово auto; для указания размеров разрешается использовать все доступные в CSS единицы измерения;
  • auto – элемент обрезаться не будет; соответствует rect(auto,auto,auto,auto).

Рис. №4. Схема отсчета некоторых значений свойства clip

Быстрый переход к другим страницам