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

Что такое CSS позиционирование?
Различное CSS позиционирование очень часто используется при верстке современных макетов, и открывает для нас новые интересные возможности расположения элементов в потоке. Но нужно быть осторожными и уметь обращаться с этими возможностями грамотно. Рассмотрим такие CSS свойства позиционирования как position, top, left, right, bottom и z-index. А так же их значения.
CSS свойство position + (left, right, top, bottom и z-index)
Элементы отображаются как обычно. Использование свойств left, top, right, bottom и z-index не приводит к каким-либо результатам.
.mainblock{
background-color: #eee; position: static;}
.block-1{
position: static;}
.block-2{
position: static;}
.block-3{
position: static;}
Положение элемента устанавливается относительно его исходного положения в коде. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: relative; top: 30px; left: 20px;}
.block-3{
}
Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: relative; top: 30px; left: 20px;}
.block-3{
position: relative; z-index: 2;}
Элемент якобы вырывается из кода и зависайт в воздухе. Он перестает влиять на остальные элементы. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону относительно родителя у колого задан параметр position: relative;
.mainblock{
background-color: #eee; position: relative;}
.block-1{
}
.block-2{
position: absolute; top: 30px; left: 20px;}
.block-3{
}
Элемент якобы вырывается из кода и зависайт в воздухе. Он перестает влиять на остальные элементы. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону относительно родителя у колого задан параметр position: relative; Если такого нет то элемент позиционируется относительно окна браузера.
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: absolute; top: 30px; left: 20px;}
.block-3{
}
Элемент якобы вырывается из кода и зависайт в воздухе. Фиксируется, то есть не скролится вместе с содержимым. Он перестает влиять на остальные элементы. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону относительно окна браузера.
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: fixed; width: 100%; top: 0px; left: 0px;}
.block-3{
}
Это гибридное сочетание значений static и fixed. Изначально єлемент ведет себя как static но после того как скролл доходит до его границы он становиться fixed и прилипает к указанной позиции top или bottom.
* Смотри поддержку браузерами
** Для демонстрации работы нужно проскролить контент внутри блока
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: sticky; top: 0px;}
.block-3{
}