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

Свойство position

Данное свойство определяет способ позиционирования элемента на странице. Возможны следующие значения свойства position:

  • static (значение по-умолчанию)
  • relative
  • fixed
  • absolute

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

Значение relative свойства position позволяет задать положение элемента относительно его нормального положения, т.е. статичного размещения.

div {
  position: relative;
  top: 20px;
  right: 100px;
}

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

Значение fixed свойства position позволяет зафиксировать элемент на экране, сохраняя его позицию даже при прокрутке страницы. При этом сам элемент вынимается из нормального потока элементов на странице.

div {
  position: fixed;
  right: 0;
  bottom: 0;
}

Абсолютное (absolute) позиционирование

Значение absolute свойства position позволяет указать координаты элемента на экране относительно ближайшего родительского тега, для которого значение свойства position отличается от static. В случае отсутствия данного родительского тега размещение элемента осуществляется относительно тела страницы, т.е. тега body.

<div class="ancestor">
  Родительский элемент
  <div class="main">Позиционируемый элемент</div>
</div>
div.ancestor {
  position: relative;
}

div.main {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
}

Перекрывание элементов

Позиционирование элементов на экране может приводить к их перекрыванию, т.е. наезжанию одного блока на другой. В этом случае с помощью CSS-свойства z-index можно задавать порядок наложения элементов. В качестве значений данного свойства указываются целые числа, в т.ч. и отрицательные. Элементы с большим значением z-index отображаются на экране поверх элементов с меньшим значением. При перекрывании элементов без указания свойства z-index вверху будет тот элемент, который появляется в HTML-верстке позже.

div.first {
  z-index: 10000;
}

div.last {
  z-index: -1;
}

Плавающие элементы

С помощью CSS-свойства float можно задавать на странице так называемые "плавающие" элементы, которые вынимаются из основного потока и смещаются вправо или влево насколько позволяет верстка страницы. Направление смещения задается значениями right и left свойства float. Самый простой пример "плавающего" элемента - это картинка, которую обтекает текст.

img {
  float: left;
  margin: 0 10px 10px 0;
}

Отмена обтекания

"Плавающие" элементы влияют на поведение на экране следующих за ним блоков. Такие блоки могут смещаться, обтекая "плавающий" элемент, что не всегда приемлемо. Для отмены обтекания можно использовать CSS-свойство clear и указать в нем направление, где обтекание запрещено. Возможны следующие значения данного свойства: left, right и both.

p {
  clear: both; // Обтекание полностью запрещено
}

Clearfix

Если "плавающий" элемент больше родительского контейнера, то он будет выходить за границы контейнера, что не всегда желательно. Для того, чтобы растянуть родительский контейнер по высоте "плавающего" элемента, можно добавить к "плавающему" элементу следующее CSS-правило:

.clearfix {
  overflow: auto;
}

Размещение элементов на странице определяется с помощью CSS-свойства position в сочетании со свойствами top, right, bottom и left. Свойство position определяет способ позиционирования, а свойства top, right, bottom и left задают отступы в различных направлениях.