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

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

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

Все браузеры в ходе разбора html-кода и формирования веб-страницы располагают элементы по установленному стандарту, согласно которому блочные элементы располагаются вертикально друг под другом, т.к. по умолчанию они стремятся занять всю доступную в данной ситуации ширину, а строчные элементы наоборот, располагаются горизонтально друг за другом до тех пор, пока не будет занята вся доступная в данной ситуации ширина, после чего браузер делает перенос строки и продолжает располагать строчные элементы друг за другом на новой строке. Однако такой способ расположения элементов на странице далеко не всегда удобен, поэтому в CSS присутствует специальное ненаследуемое свойство position, которое позволяет определять порядок расположения элементов относительно окна браузера, других элементов на веб-странице или относительно текущего местоположения элемента. Данное свойство используется в комбинации со свойствами left, right, top и bottom, которые определяют относительное смещение позиционированного элемента (см. пример 5.2). В качестве значений эти свойства принимают любые доступные в 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 приведет к его смещению относительно текущего положения соответствующей стороны элемента, при этом его место не будет занято другими элементами из потока, т.к. для них относительно позиционированный элемент как будто остается на прежнем месте (в потоке документа).
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Позиционирование элементов</title>
	<style>
		.class_1{
		color: green;
		border: solid 2px blue;
		width: 450px;
		height: 150px;
		}
		.pos_1{position: absolute; top: 20px; left: 20px;}
		.pos_2{position: fixed; top: 240px; left: 20px;}
	</style>
</head>
<body>
	<p class="class_1 pos_1">
		Позиционирован абсолютно относительно окна браузера, т.к. 
		позиционированные не статически родитель или предок отсутствуют.
		При чем координаты левого верхнего угла элемента равны  20px 
		по горизонтали и 20px по вертикали относительно левого верхнего 
		угла браузера.
	</p>
	
	<p class="class_1 pos_2">
		Позиционирован фиксированно. При чем координаты левого верхнего угла 
		элемента равны 20px по горизонтали и 240px по вертикали относительно 
		левого верхнего угла браузера. Если бы на странице присутствовала 
		прокрутка, то данный абзац всегда оставался бы на месте, в то время 
		как верхний абзац стал бы перемещаться вместе со страницей.
	</p>
</body>
</html>

Пример 5.2. Использование различных вариантов позиционирования элементов

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>z-index</title>
	<style>
		.class_1{
		padding: 0px;
		border: solid 5px red;
		width: 400px;
		height: 200px;
		}
		.pos_1{position: absolute; top: 20px; left: 20px;}
		.pos_2{position: absolute; top: 60px; left: 60px;}
	</style>
</head>
<body>
	<p class="class_1 pos_1" style="z-index: 2; background-color: yellow">
		Позиционирован абсолютно. z-index равен 2.
	</p>
	
	<p class="class_1 pos_2" style="z-index: 3; background-color: violet">
		Позиционирован абсолютно. z-index равен 3, поэтому данный абзац 
		находится выше, т.е. ближе к нам по оси z.
	</p>
</body>
</html>

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

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

css-свойство clip

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство clip</title>
	<style>
		.class_1{
		padding: 5px;
		border: solid 8px red;
		width: 400px;
		height: 150px;
		left: 20px;
		overflow: scroll;
		clip: rect(6px, 385px, 135px, 6px);
		}
		.pos_1{top: 20px; position: absolute;}
		.pos_2{top: 190px;  position: fixed;}
	</style>
</head>
<body>
	<p class="class_1 pos_1" style="background-color: yellow;">
		Позиционирован, как absolute. Отсекаем полосы прокрутки 
		и делаем тоньше границы. 
	</p>
	
	<p class="class_1 pos_2" style="background-color: violet;">
		Позиционирован, как fixed. Отсекаем полосы прокрутки 
		и делаем тоньше границы.
	</p>
</body>
</html>

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

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

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

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