Как исправить наложение текста с помощью закрепления позиции? ⇐ CSS

[Гость]

there is a page that contains information about the author. I'm trying to achieve the following result when scrolling the text: https://streamable.com/4cvcgq (This is a version of the application for iOS (made on Swift), I am making a web analogue).
Here is my HTML:

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

Here is my CSS:

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

.curator__info {
position: absolute;
height: 100%;
bottom: 0;
z-index: 2;
padding: 2rem;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
.curator__details {
flex: auto;
position: relative;
flex: 0 1 80%;
bottom: 50px;
overflow-y: auto;
padding-top: 55%;
}
.curator__name {
margin-bottom: 1.5rem;
position: sticky;
top: -86%;
}

It seems ready, and it can be done without JS, but there is one single problem that I cannot solve, the text curator__about (description) fits under curator__name (curator's name), here is the video:
https://streamable.com/ov2n2b
It is necessary to somehow prevent the texts from overlapping each other, a simple solution would be to give a background-color to the curator__name element, and then this overlapping text will not be visible, but this is not what we need. I will be glad if you can help)
Here is a link to the site, you can look by clicking on the photo or name:
Tutorial:


Источник: https://stackoverflow.com/questions/781 ... ion-sticky