HTML + CSS: How do I put text above a video on a scrollable website?

Issue

I built a website with several sections. Each section is fullscreen. To reach the next section, you need to scroll down.

The first section has a video background. I would like to put some text above the video, but can't find any solution, which lets me put text above the video only in section one.

HTML:

<main>
        <section id="one">
            <video src="xxx" autoplay loop muted></video>
            <div class="oneText">
                <p>Above video</p>
            </div>
        </section>
        <section id="two">
           <p>Random content<p>
        </section>
        <section id="three">
            <p>Random content<p>
        </section>
        <section id="four">
            <p>Random content<p>
        </section>
</main>

CSS:

main {
    height: 100vh;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

section {
    scroll-snap-align: start;
    height: 100vh;
}

section video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -5;
}

.oneText {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
}

Position absolute (obviously) doesn't work...

Any help is appreciated! :)

Solution

You need to make the section of the first video relative. So add this to your CSS:

#one {
  position: relative;
}

Answered By - John