Абсолютное позиционирование absolute
Это один из самых распространённых типов позиционирования. Он задаётся правилом position: absolute;
Начнём с того, что элемент, спозиционированный абсолютно, тоже вырван из потока, то есть его пространство в потоке заняли элементы, которые следовали за ним.
В отличие от фиксированного позиционирования, абсолютно спозиционированный элемент может вести себя по-разному в зависимости от контекста, в котором находится.
Координаты top, right, bottom, left для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа т.е. тега body .
расположит блок на 30 пикселей ниже верхней границы body и на 40 пикселей правее левой.
В отличие от фиксированного позиционирования, элемент не останется на месте при прокрутке, так как он расположен относительно тела документа, а не окна браузера.
Имейте в виду: без инструкций о месторасположении вырванный из потока блок может вообще потеряться за пределами экрана. Поэтому любому элементу, который вырван из потока, обязательно задавайте определённую позицию по двум направлениям — горизонтальному и вертикальному.
Пример абсолютного позиционирования
В примере рассмотрим два варианта, позиционирование когда элемент будет позиционироваться относительно родительского элемента и относительно всего сайта. Когда относительно сайта то пролестайте на самый верх, так как блок закрепиться относительно начала сайта и будет сверху
1
2
3
position:
- элемент с фиксированным позиционированием
родительский контейер
.parent {
border: rgba(211, 221, 66, 0.63) 20px solid;
margin: 0px 0px 20px 0px;
position: relative;
}
дочерний контейнер
.item {
position: adsolute;
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);
}