-1

I'm having an issue I don't quite understand, I have a background video on a website, and I wanted to put a floating textbox over it. The problem is, the background color and borders of the textbox seem to ignore z-index and hide behind the background video, no matter what I do, while the text does seem to show up in front of the video. Any way to fix this? This has been an incredibly frustrating problem for me.

.fp-newbox {    
  background-color: rgba(170,170,170,0.4);
  box-shadow: 0 10px 18px -10px rgba(0,0,0,0.3);
  border: solid 1px rgba(170,170,170,0.6);
  border-radius: 6px;
  z-index: 30000;
}

/* homepage video */

.fp-video {
  overflow: hidden;
  z-index: -100;
}

.fp-video-inside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="fp-video">

  <video loop muted autoplay poster="img/videoframe.jpg" class="fp-video-inside">
    <source src="/wp-content/manual-uploads/earn-US-degree-long.mp4" type="video/mp4">
  </video>

  <div style="padding: 30px; height: 600px;">
    <div class="fp-newbox" width="1000px">
      <h4 style="padding: 10px; text-align: center; color: rgba(255,255,255,0.8);">A floating title</h4>
    </div>
  </div>

</div>
Al Foиce ѫ
  • 4,195
  • 12
  • 39
  • 49
escapetomars
  • 333
  • 2
  • 4
  • 9

1 Answers1

0

You can try to force the position: relative for the .fp-video div. In many cases it fixes the z-index issue.

KCarnaille
  • 1,027
  • 9
  • 18