Относительное позиционирование

Когда элементы спозиционированы относительно, они позиционируются относительно того места, где они обычно появляются в потоке. В отличие от абсолютно спозиционированных элементов, относительно спозиционированные элементы воздействуют на позиционирование последующих родственных элементов (потомков). Элементы позиционируются относительно установкой свойства relative и указанием одного или нескольких свойств «смещения»:

Пример кода

01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

02	<html xmlns="http://www.w3.org/1999/xhtml">

<head>

04	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

05	<style type="text/css">

07	position:relative;

top:60px;

09	left:50px;

10	border:2px solid #006;

11	padding:1px;

12	background-color:#600;

13	color:#eee;

15	#explanation

16	color:#006;

17	font-weight:bold;

18	font-size:1.2em;

#wrapper

21	width:600px;

22	background-color:#def;

23	border:1px solid #006;

</style>

26	<title>CSS Relative Positioning</title>

</head>

<body>

29	<div id="wrapper">

30	<h1>CSS Relative Positioning</h1>

31	<h2>From the Left and the Top</h2>

32	<div id="explanation">

33	<p>The h1 element on this page has been positioned relative to where it otherwise would be.</p>

34	<p>All other content on the page (including these sentences) will show up in the same position it would have if the h1 had not been positioned at all.</p>

</div>

</body>

</html>

Обратите внимание как текст абзаца был бы спозиционирован, если бы элемент h1 не был бы перемещен из своего изначального положения. Это произошло потому, что элемент h1 спозиционирован относительно

Посмотрим, что произойдет, если мы спозиционируем элемент h1 из правого нижнего угла, используя относительное позиционирование как в этом коде:

2	position:relative;

3	bottom:40px;

4	right:40px;

5	border:2px solid #006;

6	padding:1px;

7	background-color:#600;

8	color:#eee;

Фиксированное позиционирование

Элементы с зафиксированным позиционированием (fixed) остаются в том же месте браузерного окна, даже когда страница прокручивается. Это может использоваться для постоянного удержания элемента (например, меню) на странице.

В указанном ниже примере фиксированное позиционирование используется для удержания знака «домой», который ссылается на главной страницу в верхнем левом углу.

Пример кода

01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

02	<html xmlns="http://www.w3.org/1999/xhtml">