Question

我正在尝试创建一个页面，该页面的顶部为全角视频横幅，然后在其下方提供一些内容。此刻，只要我添加任何其他内容，它就会显示在视频顶部，而不是显示在视频下方，我不确定为什么。

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>

Answer 1

“巨无霸”，“巨无霸封面”或“视频占位符”等类别中的任何一个都具有绝对位置或固定位置吗？

如果是这样，这将从文档的自然流中删除该元素，因此您要在下面看到的文本将向上移动到“它的空间”中

Answer 2

对于要显示在顶部的对象，可以使用较高值的z-index CSS property。
（该属性仅在position不是static的情况下适用）。

内容显示在全角视频背景的顶部，而不是下方

2 个答案: