Как заставить мой контейнер прокручивать, сохраняя текст, частично отображаясь за пределами контейнера ⇐ Html

[Anonymous]

Я пытаюсь сделать элемент div вертикально прокручивать при поддержании текста заголовка, чтобы частично появляться за пределами элемента Div, например: (https://i.sstatic.net/b95r6fzu.png)
Это мой код в настоящее время без прокрутки на элементе Div:

Код: Выделить всё

h1 {
font-family: swirlgarden;
font-size: 55px;
text-align: center;
color: #3d729e;
position: absolute;
top: -150px;
}
.box {
position: relative;
width: 950px;
height: 700px;
background-color: #fffaf0;
border: 5px;
border-style: solid;
border-color: orange;
margin: auto;
margin-top: 100px;
}



Summer Knowledge

Однако, когда я добавляю Overflow-y: прокрутите в код стиля .box, он разбивает текст, так что он в конечном итоге выглядит так: (https://i.static.net/bmelvdvu.png)
Это код моего стиля, когда я добавляю шарсин Scroll)
Это код стиля, когда я добавляю шарсин Scroll)

Код: Выделить всё

 .box {
position: relative;
width: 950px;
height: 700px;
background-color: #fffaf0;
border: 5px;
border-style: solid;
border-color: orange;
margin: auto;
margin-top: 100px;
overflow-y: scroll;
}

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

Подробнее здесь: https://stackoverflow.com/questions/796 ... -partially