Question

所以这是一个奇怪的。我确定它与物体的分层有关，但老实说，我有点困惑。

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

我尝试过：

我试图设置按钮的z-index（设置为500无效）。我用过两个 -

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

和

<video src='soaehusoe' controls/>

我可以独立地对视频和按钮标签进行划分，但这没有做任何事情。老实说，我不确定什么可能会让按钮看不见但仍可用。

注意：我使用的是两个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，那个类两个你的视频和寻呼机组件，那么它将漂浮在视频之上。

Here'您的寻呼机示例位于视频下方 navbar-fixed-bottom，这应该适合您。

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

1 个答案: