H1 文本未出现在英雄图像上方

Question

I have h1 text that I want to appear above my video area.我想在video区域上方显示h1文本。 However, that's not the case.然而，事实并非如此。 If I delete the video element, then I see my h1 element.如果我删除video元素，那么我会看到我的h1元素。 It's sitting behind the video and z-index setting isn't working.它位于视频后面， z-index设置不起作用。

Here is my html这是我的 html

<body>
    <div class="nav-container">
        <h3>DAY/NIGHT</h6>

    </div>

    <video loop muted autoplay id="hero-area-video">
        <source src="./assets/video/basel.mp4">
    </video>

    <div class="hero-area">
        <h1>Helping Tour Business</h1>
        <h1>Grow</h1>
    </div>

</body>

Here is my scss: -这是我的 scss：-

.nav-container {
  width: 100vw;
  box-sizing: border-box;
  padding: 40px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;

  h3 {
    margin: 0;
    font-size: 25px;
  }
}

#hero-area-video {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.hero-area {
  background: wheat;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  z-index: 2;

  h1 {
    z-index: 2;
  }
}

Answer 1

The simplest way to fix that is to change the z-index for the video area to -1 (= negative value) to move this absolutely positioned element behind the static elements.解决这个问题的最简单方法是将视频区域的z-index更改为-1 （= 负值），以将这个绝对定位的元素移动到静态元素后面。

(You also have to add something to not let the h1 overlap the fixed-positioned .nav-container . In my snippet below, I used flex to center the h1 inside its parent.) （您还必须添加一些内容，以免h1与固定位置的.nav-container重叠。在下面的代码片段中，我使用flex将h1置于其父级内部的中心。）

 .nav-container { width: 100vw; box-sizing: border-box; padding: 40px; position: fixed; top: 0; left: 0; z-index: 2; } .nav-container h3 { margin: 0; font-size: 25px; } #hero-area-video { height: 100vh; width: 100vw; object-fit: cover; position: absolute; background: green; top: 0; left: 0; z-index: -1; } .hero-area { background: wheat; height: 100vh; width: 100vw; margin: 0; padding: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; } .hero-area h1 { z-index: 2; text-align: center; }

 <div class="nav-container"> <h3>DAY/NIGHT</h6> </div> <video loop muted autoplay id="hero-area-video"> <source src="./assets/video/basel.mp4"> </video> <div class="hero-area"> <h1>Helping Tour Business</h1> <h1>Grow</h1> </div>

H1 文本未出现在英雄图像上方

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-04 14:03:55

H1 文本未出现在英雄图像上方

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-04 14:03:55

解决方案1
1 已采纳 2019-12-04 14:03:55