Я пытаюсь сделать коробку с прокруткой текста внутри. Проблема в том, что когда текст находится на полпути вверх по полю, он отображается снаружи, когда я ожидаю, что он будет вырезан.

HTML / CSS очень прост, и я понятия не имею, что может быть не так:

#vbox {
  width: 100px;
  height: 500px;
  overflow: hidden;
  background: #afa;
}
#vtext {
  position: absolute;
  width: 100px;
  top: 250px;
}

  
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
    <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
  

Не "переполнение: скрытый;» Предполагается скрыть переполненный контент?

Редактировать :

Добавление "ПОлОжЕНИЕ: относительная» к коробке решает проблему, но яЯ все еще озадачен ... Может ли кто-нибудь объяснить это поведение?