Фиксированное позиционирование fixed

Третий вид позиционирования — фиксированный — задаётся правилом position: fixed;. position: fixed;

В корне отличается от изученных ранее тем, что фиксированное позиционирование вырывает элемент из потока. Это значит, что пространство, отведённое под элемент, займут следующие за ним элементы в потоке. А фиксированный элемент заслонит их, расположившись поверх соседей.

Положение этого элемента указывается относительно окна браузера

Такой код разместит элемент в правом верхнем углу окна, на 10 пикселей ниже верхней границы и на 40 левее правой. При скролле страницы этот блок остаётся на месте, поскольку фиксированное позиционирование закрепляет элемент относительно окна браузера, а не относительно документа.

Имейте в виду: без инструкций о месторасположении вырванный из потока блок может вообще потеряться за пределами экрана. Поэтому любому элементу, который вырван из потока, обязательно задавайте определённую позицию по двум направлениям — горизонтальному и вертикальному.

Пример фиксированного позиционирования

1

2

3

position:




  - элемент с фиксированным позиционированием 
 

 родительский контейер  
.parent {
    border: rgba(211, 221, 66, 0.63) 20px solid;
    margin: 0px 0px 20px 0px;
}


 дочерний контейнер  
.item {
    position: static;
    border: rgba(97, 47, 177, 0.63) 20px solid;
    left: 30px;
    top: 130px;
}


 контент дочернего блока  
.item__content {
    background-color: rgba(12, 134, 88, 0.63);
    padding: 50px;
    font-size: 30px;
    color: rgb(255, 255, 255);
}