CSS позиционирование (CSS position) // «Фрилансер по жизни»

Что такое CSS позиционирование?

Различное CSS позиционирование очень часто используется при верстке современных макетов, и открывает для нас новые интересные возможности расположения элементов в потоке. Но нужно быть осторожными и уметь обращаться с этими возможностями грамотно. Рассмотрим такие CSS свойства позиционирования как position, top, left, right, bottom и z-index. А так же их значения.

CSS свойство position + (left, right, top, bottom и z-index)

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Вспомогательные свойства left, right, top и bottom управляют положением элемента, а z-index управляет наложением друг на друга по оси Z

StaticПо умолчанию
Relative +top,left
Relative +z-index
Absolute+ position: relative; у родителя +top,left
Absolute+top,left
Fixed+width: 100%;+top,left
Sticky*
.block-1
.block-2
.block-3

Элементы отображаются как обычно. Использование свойств left, top, right, bottom и z-index не приводит к каким-либо результатам.

CSS код:

.mainblock{

background-color: #eee; position: static;

}

.block-1{

position: static;

}

.block-2{

position: static;

}

.block-3{

position: static;

}

.block-1
.block-2
.block-3

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

CSS код:

.mainblock{

background-color: #eee;

}

.block-1{


}

.block-2{

position: relative; top: 30px; left: 20px;

}

.block-3{


}

.block-1
.block-2
.block-3

Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

CSS код:

.mainblock{

background-color: #eee;

}

.block-1{


}

.block-2{

position: relative; top: 30px; left: 20px;

}

.block-3{

position: relative; z-index: 2;

}

.block-1
.block-2
.block-3

Элемент якобы вырывается из кода и зависайт в воздухе. Он перестает влиять на остальные элементы. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону относительно родителя у колого задан параметр position: relative;

CSS код:

.mainblock{

background-color: #eee; position: relative;

}

.block-1{


}

.block-2{

position: absolute; top: 30px; left: 20px;

}

.block-3{


}

.block-1
.block-2
.block-3

Элемент якобы вырывается из кода и зависайт в воздухе. Он перестает влиять на остальные элементы. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону относительно родителя у колого задан параметр position: relative; Если такого нет то элемент позиционируется относительно окна браузера.

CSS код:

.mainblock{

background-color: #eee;

}

.block-1{


}

.block-2{

position: absolute; top: 30px; left: 20px;

}

.block-3{


}

.block-1
.block-2
.block-3

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

CSS код:

.mainblock{

background-color: #eee;

}

.block-1{


}

.block-2{

position: fixed; width: 100%; top: 0px; left: 0px;

}

.block-3{


}

.block-1
.block-2
.block-3

Это гибридное сочетание значений static и fixed. Изначально єлемент ведет себя как static но после того как скролл доходит до его границы он становиться fixed и прилипает к указанной позиции top или bottom.

* Смотри поддержку браузерами

** Для демонстрации работы нужно проскролить контент внутри блока

CSS код:

.mainblock{

background-color: #eee;

}

.block-1{


}

.block-2{

position: sticky; top: 0px;

}

.block-3{


}