Вы можете определить тип позиционирования для области или элемента. Для этого используется свойство position. Это свойство указывает, как элемент должен быть окончательно позиционирован. Всего есть четыре различных варианта позиционирования.
• static – не осуществляется никакого специального позиционирования, и происходит обычный текcтовый поток.
• relative – происходит относительное позиционирование, ориентированное на нормальное положение или начальное положение элемента.
• absolute – происходит абсолютное позиционирование через свойства top, bottom, left и right. Абсолютно позиционированные элементы находятся вне обычного текcтового потока. Абсолютное положение рассчитывается относительно краев родительского элемента (но только если у него нет свойства position: static).
• fixed – элемент абсолютно позиционирован. При прокрутке элемент остается на месте.
Первые два варианта позволяют переменное позиционирование. Элементы позиционируются относительно друг друга. Ниже приведены два примера, как это могло бы выглядеть:
• Элемент 2 сдвигается на 30 пикселов по отношению к элементу 1.
• Элемент 2 размещается позади элемента 1.
С fixed и static ситуация иная. Эти варианты позволяют располагать элементы в установленных местах. Указания позиционирования относятся к вышестоящему родительскому элементу или окну браузера. Пример:
• Элемент 1 размещается точно на 30 пикселов от правого и 20 пикселов от верхнего края окна браузера.
Ниже более подробно рассматриваются различные варианты позиционирования. Однако предварительное замечание: В контексте позиционирования элементов важную роль играет так называемый флоатинг. Этому важному принципу CSS я уделим подробное внимание в следующем уроке. В целом это касается того, как элементы веб-сайта распределяются в документе. Элементы сдвигаются как можно дальше в каждом направлении. Через тип позиционирования можно явно управлять потоком элементов.
Относительное позиционирование
При использовании относительного позиционирования с помощью position: relative происходит два важных действия:
• Box смещается из своего обычного потока.
• Исходное место элемента резервируется.
Из-за резервирования исходного места другие элементы ведут себя так, будто элемент все еще находится на своем месте.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: relative;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Здесь определены три box. imghр box 1 относительно позиционирован.
Box 2 и Box 3 не получили инструкций по позиционированию. Поэтому они следуют нормальному потоку документа. Box 1, напротив, относительно позиционирован. Поэтому Box 2 и Box 3 совершенно не затрагиваются Box 1. Эти box не занимают место Box 1. Позиционирование box осуществляется через указания top, bottom, left и right. При относительном позиционировании позиционирование происходит относительно исходной позиции в потоке документа (Flow).
• top: 25px – box сдвигается на 25 пикселов вниз. Поэтому сверху в нормальной позиции box добавляется 25 пикселов.
• right: 25px – box сдвигается на 25 пикселов влево. Справа в нормальной позиции box добавляется 25 пикселов.
Значения пикселей следует рассматривать относительно исходной позиции. Эти значения определяют, куда вставляется значение, то есть сверху и справа. Этот аспект очень важен. Значения не указывают, куда сдвигается box.
Абсолютное позиционирование
Переходим к абсолютному позиционированию. Этот тип позиционирования полностью убирает элемент из потока. Для других элементов на странице он, казалось бы, не существует.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div {
width: 20%;
background-color: white;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
#box {
position: absolute;
top: 25px;
right: 25px;
background-color:#33CCFF;
}
</style>
</head>
<body>
<div id="box">Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</body>
</html>Здесь также определены три box. Box 1 абсолютно позиционирован.
В отличие от относительного позиционирования для Box 1 не резервируется место. Box 2 и Box 3 перемещаются вверх.
Параметры позиционирования top, right, bottom или left уже не ориентируются на исходную позицию box в потоке. Сейчас указания позиционирования относятся к следующему окружающему элементу, который был позиционирован с использованием relative, absolute или fixed. При отсутствии окружающего элемента позиционирование происходит относительно верхнего элемента дерева документа, то есть от html.
Позиционирование с помощью fixed
Свойство position: fixed позволяет зафиксировать элементы. Приведем пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p { margin-left: 25%; }
#fixiert {
position: fixed;
top: 20px;
left: 20px;
background-color:#33FFCC;
width: 20%;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="fixiert">Эффект осколков часть 1</div>
<p>Только на короткое время самое новое руководство или видео-обучение в онлайн-просмотре или содержимое из категории для загрузки бесплатно от баллов. Узнайте больше здесь ...</p>
</body>
</html>Зафиксированный блок не прокручивается, а всегда остается на назначенной ему позиции.
Для зафиксированных блоков окружающим элементом всегда является окно браузера.
Обратите внимание, что возникают значительные проблемы, особенно в связи с зафиксированными элементами в старых браузерах. Например, IE6 не делает то, что должен был бы делать. Если вы хотите оптимизировать свои веб-сайты и для этого браузера, у вас есть два варианта:
• Отказаться от зафиксированных блоков.
• Использовать хаки для IE.
Если вы хотите использовать хак, рекомендую посетить этот сайт http://thestyleworks.de/tut-art/iewinfixed.shtml. Там показано, как с помощью небольшого JavaScript можно сделать зафиксированные блоки доступными и для этого браузера.
