<video> 标签使我的按钮不可见

Question

所以这是一个奇怪的问题。我确信这与对象的分层有关，但老实说，我有点困惑。

问题：

我有一个 div，其中有一个视频元素，然后在该元素下方有一个按钮，包裹在 ul 中的 li 中。如果我注释掉 <video> 我的按钮会出现在页面底部。 （注意：<ul> 是一个引导程序 class="pager navbar-fixed-bottom"）。当包含视频时，按钮仍然存在，只是不可见。也就是说，我可以点击它，但它是完全透明的。如果我拖动元素，它会拖动，您可以看到应该是按钮上的文本的“NEXT”，所以它仍然存在。

我尝试过的：

我尝试设置按钮的z-index（设置为500无济于事）。我都用过-

<video src='soatehohu' controls></video>

和

<video src='soaehusoe' controls/>

而且我只有围绕视频和按钮标签独立的 div，但这没有任何作用。老实说，我不确定会发生什么使按钮不可见但仍然可用。

注意：我同时使用 bootstrap，并且按钮是 Material Design lite 按钮。

编辑：（更改了 id 的确切代码）

<div id="videoContainer">
  <div>
    <video id="video" src="source#t=82,223" controls/>
  </div>
  <br>
  <ul class="pager navbar-fixed-bottom">
    <li>
      <button id="nextButton" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Next</button>
    </li>
  </ul>
</div>

Answer 1

您的寻呼机需要navbar-fixed-bottom 吗？它设置了一个绝对位置，如果您有一个具有该类的 div，该类 both 您的视频和寻呼机组件，它将浮动在视频顶部。

Here's 视频下方的寻呼机示例 navbar-fixed-bottom，应该适合你。