От чего зависит расположение блочного элемента

Расположение блочного элемента зависит от нескольких факторов:

1. Тип позиционирования (position):
   • static (по умолчанию) — элемент следует нормальному потоку.
   • relative — смещается относительно своего обычного положения.
   • absolute — позиционируется относительно ближайшего позиционированного родителя.
   • fixed — фиксируется относительно viewport.
   • sticky — сочетает relative и fixed.

2. Свойства top, right, bottom, left — работают при position, отличном от static.

3. Display-свойства (display: block, inline-block, flex и т.д.) — влияют на поток документа.

4. Float (float: left/right) — вырывает элемент из потока, смещая его влево/вправо.

5. Flexbox/Grid — если родитель имеет display: flex или grid, расположение зависит от их правил.

Пример с position: absolute:

.parent { position: relative; }
.child { 
  position: absolute;
  top: 20px;
  left: 30px;
}