position¶
Позиционирование элементов
absolute
Элемент исключается из потока документа.
Позиционируется относительно всего документа, если заданы смещения top, left, …
Если не заданы смещения top, left, … то остается на своем месте.
При скроле документа будет уходить из области видимости.
.absolute-lt { position: absolute; top: 150px; left: 100px; } .absolute { position: absolute; }
absoluteabsolute-ltfixed
Элемент исключается из потока документа.
Позиционируется относительно всего документа, если заданы смещения top, left, …
Если не заданы смещения top, left, … то пропадает из области видимости.
При скроле документа будет оставаться на месте относительно окна просмотра.
.fixed-lt { position: fixed; top: 170px; left: 100px; } .fixed { position: fixed; }
fixedfixed-ltrelative
Элемент НЕ исключается из потока документа, т.е. его место остается пустым.
Позиционируется относительно своего родителя, если заданы смещения top, left, …
Если не заданы смещения top, left, … то остается на месте.
При скроле документа будет оставаться на месте относительно окна просмотра.
.relative-lt { position: relative; left: 20px; } .relative { position: relative; }
relativerelative-ltstatic - по умолчанию, нормальный поток документов
sticky - закрепленное, комбинация относительного и фиксированного
.sticky-lt { position: sticky; left: 20px; } .sticky { position: sticky; }
stickysticky-lt