Content appearing on top of full-width video background instead of below

Question

I'm trying to create a page with a full width video banner at the top then some content underneath. At the moment whenever I add any additional content it appears on top of the video, instead of below it and i'm not sure why.

HTML

<div id="content">
  <div class="homepageContainer">
    <nav id="header" class="opaque navbar navbar-default navbar-fixed-top hidden-print navbar-megamenu" role="navigation">
      ...
    </nav>
    <div class="jumbotron jumbotron-cover">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12 col-sm-8 col-md-6 col-sm-push-2 col-md-push-3">
            <div class="video-placeholder" style="background-image:url(urlOfImage)">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row hero-content text-center">
        <div class="col-sm-12 col-md-12 col-lg-8 col-lg-offset-2">
          <img src="media/img/logo.png" class="logo animated fadeInDown">
          <h1 class="animated fadeInDown top-bottom-borders">Some content text here.</h1>
        </div>
      </div>
    </div>
  </div>
</div>

What is `.video-placeholder`? Should you be using `.embed-responsive`? Do we need to see your CSS? — isherwood, Feb 19 '19 at 17:39
The question has several issues, one of which being that above != on top of so I apparently answered the question asked instead of the question intended, a waste of time :-(. It also doesn't specify a browser/version where you observe the problem and omits any relevant CSS. The HTML also appears to have an extra close div so that the last container is not a child of homepageContainer which may or may not be intended. — WBT, Feb 19 '19 at 17:42
@WBT, I think you've misread. On top of means overlaying (as opposed to above), and below means after (as opposed to behind). Browser is probably not relevant. CSS may be. — isherwood, Feb 19 '19 at 17:43
@isherwood I've seen issues of overlap show up in one browser but not another. I definitely did misread regarding the extra close div, as I missed that `div class="row"` which was on the same line as another start div. — WBT, Feb 19 '19 at 17:45

score 1 · Accepted Answer · edited Feb 19 '19 at 19:10

1

Do any of the classes "jumbotron", "jumbotron-cover" or "video-placeholder" have position absolute or fixed?

If so, this'll remove that element out of the natural flow of the document, so the text that you want to see below, will move up into "it's space"

edited Feb 19 '19 at 19:10

Bhargav Rao

50,140
28
121
140

answered Feb 19 '19 at 17:42

1amShaw

163
3

There was a position:fixed on video-placeholder that i've now changed to relative and it's working. Thanks! – user2953989 Feb 20 '19 at 09:47

score 0 · Answer 2 · answered Feb 19 '19 at 17:25

0

You can use the z-index CSS property with a higher value for objects you want displayed on top.
(The property only applies if position is not static).

answered Feb 19 '19 at 17:25

WBT

2,249
3
28
40

sorry, the problem is that the content is already on top of the video, i want it to appear below it. Thanks – user2953989 Feb 19 '19 at 17:27
Set the z-index for the video to be higher then, if you want the video on top. Also, please validate that your end div tags are all matching up what you expect them to match. – WBT Feb 19 '19 at 17:29
won't that make the content appear behind the video? i want it to be below the video – user2953989 Feb 19 '19 at 17:30

Content appearing on top of full-width video background instead of below

2 Answers2