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
.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{
}