Для передвижения блоков в CSS используются свойства position и соответствующие им значения: absolute, relative и fixed.
- Position: static (Позиция по умолчанию) — блок всегда отображается в соответствии со стандартным порядком, который определяется потоком элементов на странице. Это значит, что вы не можете управлять положением блока в потоке — он занимает то место, куда его помещает HTML.
- Position: relative (Относительное позиционирование) — позволяет передвигать блок относительно его исходного положения в нормальном потоке. Для управления положением блока используйте свойства top, right, bottom и left. При этом соседние элементы остаются на своих местах.
- Position: absolute (Абсолютное позиционирование) — позволяет абсолютно позиционировать блок внутри родительского элемента. Для задания положения блока используйте свойства top, right, bottom и left. При этом соседние элементы могут передвигаться в зависимости от положения абсолютно позиционированного элемента.
- Position: fixed (Фиксированное позиционирование) — позволяет абсолютно позиционировать блок внутри окна браузера. Такой блок не изменяет свою позицию при скроллинге страницы.
Пример:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<style>
.container {
position: relative;
}
.box {
position: absolute;
top: 50px;
left: 50px;
}
</style>В этом примере блоки с классом .box будут абсолютно позиционированы внутри блока .container в левом верхнем углу окна браузера, с отступом сверху и слева 50px.
