Как работает свойство overflow и чем оно отличается от абсолютного позиционирования?

Свойство CSS overflow управляет тем, как браузер отображает содержимое блока, если оно выходит за пределы заданных размеров. Например, overflow: hidden обрезает лишнее, overflow: scroll добавляет полосы прокрутки.

Абсолютное позиционирование (position: absolute) полностью выводит элемент из нормального потока документа и позиционирует его относительно ближайшего позиционированного предка или окна.

Основные отличия:

• overflow контролирует видимость и прокрутку содержимого внутри блока, не меняя его позиционирование.
• position: absolute меняет расположение элемента на странице, позволяя свободно его перемещать.

Пример:

.container {
  width: 200px;
  height: 100px;
  overflow: auto;
  border: 1px solid #000;
}
.content {
  width: 300px;
  height: 150px;
}

В этом примере .container ограничивает видимую область, а .content выходит за пределы, вызывая появление полос прокрутки.

Если же .content сделать position: absolute, он будет позиционироваться независимо от .container и не вызовет прокрутку.