position

Позиционирование задаётся с помощью свойства position. Свойство может иметь четыре значения, которые мы и рассмотрим.

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

Абсолютное позиционирование задается так:


position: absolute

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

Теперь его можно перемещать с помощью свойств left, right, top и bottom. По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative, то смещение происходит относительно родительского блока.


.block{
    position: absolute;
    bottom: 0;
    right: 0;
    background: gray;
}

Элемент с классом block будет сдвинут в нижний правый угол браузера.

Рассмотрим пример, когда блок находится внутри родительского элемента.


<style>
#wrapper{
    position: relative;
    width: 200px;
    height: 100px;
    background: yellow;
}

.block{
    position: absolute;
    top: 1px;
    left: 5px;
    right: 10px;
    bottom: 15px;
    background: green;
}
</style>


<div id = "wrapper">
<div class = "block">Блок внутри родительского элемента</div>
</div>
Блок внутри родительского элемента

Мы сначала родительскому контейнеру записали относительное позиционирование (relative), а для элемента block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper.

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

Относительное позиционирование записывается так – position: relative. Координаты задаются такими же свойствами, как и при абсолютном позиционировании. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.

Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остается нетронутым. Блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части. Сдвинуть блок можно с помощью свойств top, left и так далее.

Помните, что смещение происходит не от краев окна браузера, а от того места, где изначально стоял блок.


<style>
.block_standard {
    width: 300px;
    height: 150px;
    background: pink;
    margin: 2px;
}

.block2 {
    position: relative;
    top: -10px;
    left: 50px;
    background: green;
}
</style>

<div class="block_standard">Стандартный блок</div>
<div class="block_standard">Стандартный блок</div>
<div class="block_standard block2">Блок подвинется на 50 пикселей вправо и на 10 вверх. Но его место осталось нетронутым.</div>
<div class="block_standard">Стандартный блок</div>
Стандартный блок
Стандартный блок
Блок подвинется на 50 пикселей вправо и на 10 вверх. Но его место осталось нетронутым.
Стандартный блок

Как видите, можно задавать и отрицательные значения.

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

Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:


.block{
    position: fixed;
}

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

Статическое позиционирование

Последний вид – статическое позиционирование, это обычное поведение блочный элементов. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определенных событиях на веб-странице в сценариях JavaScript.

Реклама