Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS: Position - Coggle Diagram
CSS: Position
Поток документа
-
В обычном виде элементы выводятся в том порядке, в котором расположены в HTML
-
-
Виды позиционирования
Относительное
-
-
Данный вид позиционирования часто используют для визуальных эффектов (тени, небольшоая анимация при наведении на элемент)
position: relative
top, bottom, left, right
-
Если применить данное позиционирование, то элемент будет налезать на соседние элементы
Абсолютное
position: absolute
top, bottom, left, right
-
Другие элементы могут занять его место в нормальном потоке, если ширина и высота позволяют
Элемент вырванный из нормального потока начинает позиционироваться относительно левого верхнего угла через top, bottom, left, right (если родители не имеют какого-либо позиционирования) или позиционирауются относительно родителя (если родитель имеет относительное или абсолютное позиционирование)
Блочные элементы при абсолютном позиционировании начинают вести себя как строчные. Они перестают занимать всю возможную ширину. Ширина состоит только из контента и отступов.
Фиксированное
position: fixed
top, bottom, left, right
-
-
-
z-index
Свойство работает только с элементами со значением position: absolute, relative, fixed, sticky
Позиционирование - управление расположением элемента по осям координат x, y, z
Базовые возможности позиционирования - position, float, z-index