HTML + CSS: 如何在可滚动网站的视频上方放置文本？

Question

我建立了一个包含多个部分的网站。每个部分都是全屏的。要到达下一部分，您需要向下滚动。

第一节有视频背景。我想在视频上方放一些文字，但找不到任何解决方案，只能在第一节中将文字放在视频上方。

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%);
}

绝对位置（显然）不起作用...

感谢任何帮助！ :)

Answer 1

您需要使第一个视频的部分相对。所以将此添加到您的 CSS:

#one {
  position: relative;
}

Answer 2

position: absolute; 相对于最近定位的祖先

定位

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: 1;
}

section#one {
  position: relative;
}

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

<main>
  <section id="one">
    <video src="https://www.w3schools.com/html/mov_bbb.mp4" 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>

HTML + CSS: 如何在可滚动网站的视频上方放置文本？

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

html

css

video

background