Question

我正在尝试将一个小型视频放置在类似横幅的div元素后面。经过一段时间的研究，我设法至少显示了div的内容，但视频无处可见。如果我将它们分别放置，两者都会出现，但是如果我尝试将它们堆叠在一起，它就会消失。

HTML：

<div id="castle-siege">
    <div id="cs-video">
        <video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
            <source src=/assets/img/cs.mp4" type="video/mp4">
        </video>
    </div>
    <div id="cs-table">
        //content
    </div>
</div>

CSS：

#castle-siege {
    width: 1000px;
    height: 150px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#cs-video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
}

#cs-table {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 10;
}

Answer 1

我认为在这种情况下，您需要设置position属性和z索引才能正确显示视频。当然，还要确保您的视频显示在正确的网址上，并且正确无误！将视频的位置设置为absolute，并根据需要将表格relative设置为z-index或更高（如果希望在顶部显示，则更高）视频）

出于演示目的，我将宽度设置为80％，最好使用百分比/可调整单位，而不是将宽度设置为px。

希望这会有所帮助

    #castle-siege {
      width: 80%;
      height: 150px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    #cs-video {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      z-index:0;
    }

    #cs-table {
      width: 100%;
      height: 100%;
      margin-top: 30px;
      margin-left: 50px;
      color:red;
      text-align:left;
      position: relative;
      z-index:1;
    }

<div id="castle-siege">
  <div id="cs-video">
    <video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
      <source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4">
    </video>
  </div>
  <div id="cs-table">
     Hi there, how's it going? There's supposed to be a table here.
  </div>
</div>

无法将视频放置在div元素后面

1 个答案: