position

Для того, чтобы сделать более сложный шаблон, мы должны обсудить стилевое свойство position. Оно имеет кучу возможных значений, названия которых лишены смысла и их невозможно запомнить. Давайте рассмотрим одно значение за другим по очереди. Не исключено, что вам следует добавить эту страницу в закладки.

static

.static {
  position: static;
}

static является значением по умолчанию. Элемент с position: static; отображается как обычно и не будет позиционироваться каким-либо специальным способом, он просто плюхнется вниз.

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative ведет себя в точности как static но лишь до тех пор, пока вы не добавите некоторые дополнительные свойства.

</div>

Добавление свойств top, right, bottom, и left изменяет позицию элемента, сдвигая его в ту или иную сторону относительно его начального расположения. Другой контент не будет перестраиваться, чтобы заполнить любое свободное пространство, оставленное этим элементом.

</div>

fixed

Привет! Не обращай на меня внимания.

</div>

Фиксированное позиционирование элемента относительно окна браузера таково, что он всегда занимает одно и тоже место даже при прокрутке страницы, словно он приклеен к экрану. Также как и для relative, дополнительные свойства top, right, bottom, и left для данного позиционирования будут работать.

Я уверен, что вы заметили этот неподвижный элемент в правом нижнем углу страницы. Если же нет, то обратите внимание на него сейчас. Вот CSS, который применяется к нему:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

Фиксированный элемент не оставляет за собой свободное пространство на странице, где он был расположен.

У мобильных браузеров достаточно шаткая поддержка фиксированного позиционирования. Узнать больше об этой ситуации можно здесь..

absolute

absolute наиболее сложное значение позиционирования. absolute ведет себя как fixed за исключением того, что позиционирование отсчитывается относительно ближайшего расположенного родителя а не относительно окна браузера. Если элемент абсолютно позиционирован и не имеет родителя,то он использует тело документа и продолжает двигатся вместе со всей страницей при скроллинге. Помните , что "позиционированный" элемент - это элемент с любым значением свойства position кроме значения static.

Вот простой пример:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

Этот элемент относительно позиционированный. Если бы элемент имел значение position: static; то его асболютно позиционированный ребенок убежал бы и стал позиционироваться уже относительно тела документа.

Этот элемент абсолютно позиционированный. Он позиционирован относительно его родителя.

</div>

Этот материал на первый взгляд может показаться сложным, но он очень важен, чтобы создавать хорошую CSS разметку. На следующей странице мы будем использовать position на практике.

Назад Далее