javascript - 标签让我的按钮不可见

Question

所以这很奇怪。我确定它与对象的分层有关，但老实说，我有点困惑。

问题:

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

我尝试过的:

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

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

和

<video src='soaehusoe' controls/>

我只在视频和按钮标签周围分别设置了 div，但这什么也没做。老实说，我不确定可能会发生什么使按钮不可见但仍然可用。

注意:我同时使用了 bootstrap，按钮是 Material Design 精简版按钮。

编辑:(更改了 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，同时您的视频和寻呼机组件，它将漂浮在视频之上。

Here' 没有 navbar-fixed-bottom 的视频下方是寻呼机的示例，它应该适合您。