Далее на странице...
По умолчанию все элементы на странице располагаются последовательно:
- блочные элементы располагаются один под другим,
- строчные элементы располагаются один за другим.
В CSS есть возможность управлять позиционированием элементов, благодаря которому Вы можете нарушить установленный порядок их расположения и размещать элементы в нужном Вам месте страницы.
Позиционирование осуществляется при помощи свойства position. Оно устанавливает способ позиционирования и может быть применено ко всем элементам.
Различают абсолютное и относительное позиционирование элементов.
Абсолютное позиционирование
Значение absolute свойства position устанавливает абсолютное позиционирование элемента.
При абсолютном позиционировании координаты нового положения элемента задаются с помощью свойств top,right, bottom и left:
- относительно краев окна браузера, если родительского элемента нет или если для него свойству position присвоено значение static (значение по умолчанию).
- относительно краев родительского элемента, если для него свойству position присвоено значение absolute, fixed или relative.
Отличительной особенностью абсолютного позиционирования является освобождение элементом ранее занимаемого пространства: освобожденная область может быть занята другим элементом.
При значении fixed свойства position элемент также будет абсолютно позиционированным. Но при этом элемент фиксируется в точке с координатами, заданными свойствами top,right, bottom и left: он не прокручивается вместе с содержимым страницы.
<p style="border:#CC0000 solid 1px; padding:5px;">
<img src="img/peng_64.gif"> Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.
</p>
<p style="border:#CC0000 solid 1px; padding:5px;">
<img src="img/peng_64.gif" style="position:fixed; top:300px; right:220px;"> Текст сместился на место, ранее занимаемое пингвином. А пингвин зафиксирован!
</p>
Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.
Текст сместился на место, ранее занимаемое пингвином. А пингвин зафиксирован!
В приведенном примере для пингвина во втором абзаце установлено значение fixed для свойства position и заданы координаты при помощи ключевых слов top и right.
Отсчет координат ведется от краев окна браузера, так как у родительского элемента (абзаца - тега ) свойство position не указано, следовательно, оно принимает значение по умолчанию static.
Таким образом пингвин расположен на расстоянии 300 пикселей от верхнего края и 220 пикселей от правого края окна браузера. И он не прокручивается вместе с содержимым страницы: Вы все время его видите в одном и том же фиксированном месте (смотрите направо. Но при уменьшении разрешения экрана, изображение все больше смещается к центру страницы, а при просмотре с мобильных устройств, оно располагается уже слева).
Относительное позиционирование
Значение relative свойства position устанавливает относительное позиционирование элемента.
При относительном позиционировании координаты нового положения элемента также задаются с помощью свойств top,right, bottom и left.
Но отсчет координат ведется относительно первоначального места положения элемента. При этом ранее занимаемое пространство он не освобождает, и это место не могут занять другие элементы.
<p style="border:#CC0000 solid 1px; padding:5px;">
<img src="img/peng_64.gif"> Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.
</p>
<p style="border:#CC0000 solid 1px; padding:5px;">
<img src="img/peng_64.gif" style="position:relative; bottom:10px; left:100px;"> Текст не сместился на место, ранее занимаемое пингвином: оно как бы осталось за ним!
</p>
Пингвин располагается в левой части абзаца - так как он и должен располагаться по умолчанию.
Текст не сместился на место, ранее занимаемое пингвином: оно как бы осталось за ним!
В приведенном примере для пингвина во втором абзаце установлено значение relative для свойства position и заданы координаты при помощи ключевых слов bottom:10px и left:100px.
Отсчет координат ведется относительно первоначального места положения пингвина.
Слои в CSS. Координата Z
Условно каждый элемент имеет две координаты (так как мы имеем дело с плоскостью) X и Y, которые определяют его положение на странице.
В CSS есть возможность задавать для элементов третью - пространственную координату Z, тем самым имитируя третье измерение и позволяя элементам накладываться друг на друга.
Выходит так, как будто мы работаем со слоями. Это понятие знакомо тем, кто имел дело с каким-либо графическим редактором, например с Adobe Photoshop.
Свойство z-index реализует эту возможность: оно задает значение координаты Z, определяя номер слоя, на котором располагается элемент, и тем самым устанавливая порядок наложения элементов друг на друга
Значением свойства z-index может быть любое целое положительное число или 0. Чем больше значение Z, тем выше слой располагается по отношению к слоям с меньшим значением координаты.
Например, слой с номером 3 будет ближе к пользователю, чем слои с номерами 2 и 1 или слой без заданной координаты Z.
По умолчанию свойству z-index присваивается значение auto или 0. А на переднем плане располагается тот элемент, который в исходном коде HTML описан ниже, так же как и при равных значениях свойства z-index.
Свойство применяется к позиционированным элементам, то есть к элементам для которых установлено свойство position со значением absolute, fixed или relative.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство z-index </title>
<style type="text/css">
.z0 {position:absolute; font-size:60px; color:#FF0000; z-index:2; top:30px}
.z1 {position:absolute; font-size:70px; color:#6699FF; z-index:1; left:20px}
</style>
</head>
<body>
<p class="z0"> Привет! </p>
<p class="z1"> Привет! </p>
</body>
</html>
Пояснение к примеру: Красный "Привет" ближе к пользователю, так как для него установлено большее значение свойства z-index, равное 2. В то время как для синего "Привета" z-index равно 1.
