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

position: static

Значение по умолчанию, означает отсутствие позиционирования. Элементы отображаются последовательно один за другим в том порядке, в котором они определены в html-документе.

Нет необходимости специально назначать это свойство какому-либо элементу, если только вам не требуется изменить ранее установленное позиционирование на дефолтное.

#content1 {
    position: static;
}
				

Пример 1 →

position: relative

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

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

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

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

#content2 {
    position: relative;
    top: 20px;
    right: -20px;
}
				

Пример 2 →

Свойства смещения

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

auto

Значение по умолчанию. Вычисляемое значение свойства равно нулю.

Длина

Смещение задаётся в единицах длины.

%

Процентные значения вычисляются относительно высоты блока-контейнера для top и bottom и ширины блока-контейнера для right и left.

initial

Устанавливает значение свойства в значение по умолчанию.

inherit

Наследует значение свойства от родительского элемента.

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

position: absolute

При абсолютном позиционировании (position: absolute), элемент удаляется из документа, и появляется там, где вы ему скажете.

Абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно его блока-контейнера (другого элемента или окна браузера). Блок-контейнер для абсолютно позиционированного элемента — ближайший элемент-предок, значение свойства position которого не равно static.

Местоположение краёв элемента определяется с помощью свойств смещения. Пространство, которое занимал такой элемент, схлопывается, как будто элемента не существовало на странице. Абсолютно позиционированный элемент может перекрывать другие элементы или быть перекрытым ими (за счёт свойства z-index). Любой абсолютно позиционированный элемент генерирует блок, то есть принимает значение display: block;.

#content3 {
    position: absolute;
    top: 0px;
    left: 100px;
}
				

Пример 3 →

Обратите внимание, что на этот раз, поскольку блок article 2 был удален из документа, оставшиеся элементы на странице расположились по-другому: article 1, article 3 и footer переместились выше, на место удаленного блока. А сам блок article 2, расположился точно в левом, верхнему углу страницы.

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

position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.

Блоком-контейнером фиксированного элемента является окно просмотра, при этом элемент полностью удаляется из потока документа.

#content4 {
    position: fixed;
    top: 100px;
    left: 100px;
}
				

Пример 4 →

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

Для блока-контейнера абсолютно позиционированного элемента задаётся свойство position: relative без смещений. Это позволяет позиционировать элементы внутри элемента-контейнера.

Назначив блоку section относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок article 2, в верхнем правом углу блока section.

section {
    position: relative;
}
.absolut {
    position: absolute;
    top: 0px;
    right: 0px;
}
				

Пример 5 →

Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от float.

Проблемы позиционирования

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

section {
    position: relative;
}

#art-1 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 45%;
    height: 300px;
}

#art-2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 45%;
    height: 300px;
}
				

Пример 6 →

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.

section {
    position: relative;
    height: 400px;
}
				

Пример 7 →

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

Решение проблемы позиционирования float

clear - устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.

.art-clear {
    clear: both;
}
				

Пример 9 → Тот же пример, но нужно зайти в панель разработчика чтобы включить свойство.

.clearfix {
    clear: both;
}
				

<section>
    <article>
        Душа моя озарена неземной радостью, как .....
    </article>
    <article>
        Душа моя озарена неземной радостью, как .....
    </article>
    <article class="clearfix">Душа моя озарена неземной радостью, как .....</article>    
</article>
				

Особенности свойства float

Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок.

Верхние и нижние отступы margin плавающих элементов не схлопываются. Свойство floatприменяется как к блочным элементам, так и к строчным элементам.

Левый или правый внешний край перемещаемого элемента, в отличие от позиционированных элементов, не может располагаться левее (или правее) внутреннего края его блока-контейнера, т.е. выходить за его границы. При этом, если для блока-контейнера заданы внутренние отступы, то плавающий блок будет отступать от края блока-контейнера на заданное расстояние.

Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline, inline-block, table-row, table-row-group, table-column, table-column-group, table-cell, table-caption, table-header-group, table-footer-group. Значение inline-table меняет на table.

Пример 10 →