Hey there, I'm encountering a puzzling issue with my website. I have a background video set up, and I wanted to overlay a floating textbox on top of it. However, no matter what I do, the background color and borders of the textbox seem to be hiding behind the video, completely ignoring the z-index property. The text inside the box does show up correctly in front of the video, but the styling is all messed up. It's been quite frustrating trying to solve this problem.
.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>