Tel: +372 5596 5762
e-mail: info@digipo.eu

Позиционирование – это конкретное месторасположение определенного объекта или бокса на странице веб сайта.

 

Позиционирование
 
Пример CSS
body { color: black; background-color: white; }
#page { background-color: #fff; width: 400px; height: 350px; float: left; margin: 10px; border: dotted 2px #247eca; }
#block1 { background-color: #f65b4f; position: relative; top: 5px; left: 10px; width: 350px; height: 400px; padding: 5px; border: solid 1px #000; }
#block2 { background-color: #ffd965; position: absolute; top: 90px; left: 50px; width: 282px; height: 135px; padding: 5px; border: solid 1px #000; }
#block3 { background-color: #cc5ea3; position: fixed; top: 300px; left: 10px; width: 350px; height: 100px; padding: 5px; border: dashed 1px red; }
#block4 { color: #fff; background-color: #cb2229; position: fixed; top: 215px; left: 200px; width: 200px; height: 80px; z-index: 1; padding: 5px; border: double 2px white; }

HTML-код для этого примера:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id=page>
<div id=block1>
Блок с параметарми: position: relative - позиционирован относительно крёв элемента родителя.</div></div>
<div id=block2>
Блок с параметарми: position: absolute - абсолютно позицонорован и выведен из общего потока, его положение задаётся от краёв окна браузера. Как видите данный блок может накладываться на другие элементы страницы.</div>
<div id=block3>
Блок с параметарми: position: fixed - фиксированный блок, тоже выведен из общего потока однако при прокручивании страницы он не меняет своего положения. Ранние версии браузера Internet Explorer игнорируют данное свойство.</div>
<div id=block4>
Блок с параметарми: z-index позволяет веб-мастеру управлять позициями  слоёв в глубину.</div></div>
</body>
</html>

Итак, для того, что бы позиционировать какой либо элемент к нему применяют свойство position и одно из его возможных значений:
• absolute - Абсолютное позиционирование элемента.
• relative - Относительное позиционирование элемента.
• fixed - Фиксированное позиционирование элемента.
• static - Статическое позиционирование элемента. (Элемент отображаются как обычно.)
• inherit - Наследует значение элемента родителя.

Абсолютное позиционирование.
Абсолютно позиционированный элемент (position: absolute) выводится из общего потока и несмотря на другие элементы и их взаимное расположение, занимает указанное место на странице от края/краёв окна браузера. При таком способе позиционирования один элемент может накладываться поверх другого.
Для того чтобы позиционировать элемент от края/краёв окна браузера, нам понадобятся следующие свойства CSS:
• bottom - Расстояние от нижнего края окна браузера.
• left - Расстояние от левого края окна браузера.
• right - Расстояние от правого края окна браузера.
• top - Расстояние от верхнего края окна браузера.
Данные расстояния могут быть заданы в пикселях, процентах или любых других принятых единицах измерения CSS, значение по умолчанию - auto.

Относительное позиционирование.
Относительное позиционирование (position: relative) определяет место элемента относительно краёв элемента родителя и не выводится из общего потока.
Так же как и в случае с абсолютным позиционированием расстояния от края/краёв родительского элемента задаётся с помощью свойств: bottom, left, right, top.
В случае если элемент родитель явно не задан, то отчет ведётся от края/краёв окна браузера.

Фиксированное позиционирование.
Фиксированное позиционирование (position: fixed) похоже на абсолютное, элемент выводится из общего потока, его координаты рассчитываются от краёв окна браузера, но при прокрутке страницы элемент не меняет своего положения.
P.S. Ранние версии браузера Internet Explorer игнорируют данное свойство и элемент выводится на странице так как будто его вовсе не позиционировали.

z-index
Свойство z-index позволяет веб-мастеру управлять позициями этих слоёв в глубину экрана (по оси Z.) , другими словами позволяет указывать браузеру какие элементы следует показывать на переднем плане, а какие на заднем.

z-index
Значения свойства z-index:
• auto - Элементы накладываются друг на друга в том порядке, каком они указаны в коде HTML. (по умолчанию).
• целое число - Чем выше данное значение, тем более высокую позицию занимает элемент по отношению к тем элементам, значение которых ниже.
Числовое значение z-index может быть и отрицательным, однако не все браузеры правильно интерпретируют отрицательные значения.
Еще следует отметить, что при равном значении z-index, на переднем плане находится тот элемент, который в коде HTML идет ниже остальных.
Это же правило действует при z-index равным auto или же в том случае если бы данное свойство и вовсе не применялось к тем или иным элементам.

Вот интересный пример использования z-index

Рассмотрим HTML код примера:

<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Проведите курсором по нотам</h2>
<a href="#" style="left: 10px"><img src="/n1.png"></a>
<a href="#" style="left: 74px"><img src="/n2.png"></a>
<a href="#" style="left: 154px"><img src="/n3.png"></a>
<a href="#" style="left: 280px"><img src="/n4.png"></a>
<p style="position: absolute; left: 10px; top: 250px;">В отличии от других браузеров IE6, псевдокласс <b>:hover</b> работает только для ссылок, поэтому в качестве контейнера для рисунков нот использую никуда не ведущую ссылку. (<b>a href="#"</b>)</p>
</body>
</html>

Рассмотрим CSS кол примера:

body {}
a {position: absolute; z-index: auto; top: 100px; }
a:hover { position: absolute; z-index:1; top: 80px;}

 

Задания:

Создайте собственные страницы используя примеры на рисунках ниже

Задание позициионривания 1

Рисунок 1 - квадрат  position: fixed должен при прокрутке страницы оставаться на месте, вместе с внутреннем квадратом.

Задание позициионривания 2

Рисунок 2

 

В предыдущем уроке рассматривали Float (всплывающие элементы)

В следующем уроке рассмотрим возможности CSS 3