Question

我正在建立一个自动播放视频作为英雄元素的网站，我目前将视频设置为以下css：

#video-background {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto !important;
    height: auto !important;
    z-index: -100;
}

其目的是使其为全宽。需要固定位置，因为视频下方的内容需要能够滚动视频。

不幸的是，即使使用负z-index，视频也会阻止您点击页面下方的内容。它仍然覆盖了一切。当我右键单击播放，暂停，取消静音等控件时会出现。

不确定如何防止这种情况发生。我尝试过使用某些设置，但是任何（我已经尝试过，至少尝试过）使其全宽的内容最终导致它覆盖所有内容。

这是html：

<video autoplay="" loop="" id="video-background" muted="" style="width: 100%; height: 100%;">
    <source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4">
</video>

编辑：在同事的帮助下解决了这个问题。这是CSS：

div#layer_slider_1 {
  height: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
}

div#after_layer_slider_1 {
  margin-top: 800px;
}

div＃layer_slider_1是父div。 div＃after_layer_slider_1显然就是它之后的div。

感谢您的投入。

Answer 1

添加此CSS属性

html, body {
  width:100%;
  height:100%; 
}

Answer 2

在同事的帮助下解决了这个问题。这是CSS：

div#layer_slider_1 {
  height: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
}

div#after_layer_slider_1 {
  margin-top: 800px;
}

div＃layer_slider_1是父div。 div＃after_layer_slider_1显然就是它之后的div。需要使下面的div覆盖视频，以避免它覆盖整个页面，即使使用z-index。

感谢您的投入。

100％固定位置覆盖屏幕

2 个答案: