position

Позиционирование элементов

1
2
3
  • absolute

    Элемент исключается из потока документа.

    Позиционируется относительно всего документа, если заданы смещения top, left, …

    Если не заданы смещения top, left, … то остается на своем месте.

    При скроле документа будет уходить из области видимости.

    .absolute-lt {
        position: absolute;
        top: 150px;
        left: 100px;
    }
    .absolute {
        position: absolute;
    }
    
    absolute
    absolute-lt
  • fixed

    Элемент исключается из потока документа.

    Позиционируется относительно всего документа, если заданы смещения top, left, …

    Если не заданы смещения top, left, … то пропадает из области видимости.

    При скроле документа будет оставаться на месте относительно окна просмотра.

    .fixed-lt {
        position: fixed;
        top: 170px;
        left: 100px;
    }
    .fixed {
        position: fixed;
    }
    
    fixed
    fixed-lt
  • relative

    Элемент НЕ исключается из потока документа, т.е. его место остается пустым.

    Позиционируется относительно своего родителя, если заданы смещения top, left, …

    Если не заданы смещения top, left, … то остается на месте.

    При скроле документа будет оставаться на месте относительно окна просмотра.

    .relative-lt {
        position: relative;
        left: 20px;
    }
    .relative {
        position: relative;
    }
    
    relative
    relative-lt
  • static - по умолчанию, нормальный поток документов

  • sticky - закрепленное, комбинация относительного и фиксированного

    .sticky-lt {
        position: sticky;
        left: 20px;
    }
    .sticky {
        position: sticky;
    }
    
    sticky
    sticky-lt