CODEWITHSUNDEEP
htmlcsssass
killerprince182
killerprince182

Reputation: 465

H1 text not appearing above hero image

I have h1 text that I want to appear above my video area. However, that's not the case. If I delete the video element, then I see my h1 element. It's sitting behind the video and z-index setting isn't working.

Here is my 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: -

.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;
  }
}

Upvotes: 0

Views: 263

Answers (1)

Johannes
Johannes

Reputation: 67778

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.

(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.)

.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>

Upvotes: 1

Related Questions