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