位置问题：绝对和视频答案

【问题标题】：Problems with Position:Absolute and Video位置问题：绝对和视频
【发布时间】：2017-08-08 07:29:05
【问题描述】：

我目前正在为视频制作人制作网站。当您访问他的网页时，他希望让他的演示卷轴在后台运行。我正在尝试创建一些将覆盖视频的 div 元素。它们实际上会位于网页的顶部，有点像导航栏，但不是真的。

这是我正在使用的代码。当然，运行时您将看不到内容，但也许我在某些地方有错误。

.background-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
	left: 0;
  background: #353030;
}

#video-background {
  position: relative;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: 500; 
  height: 500;
  z-index: 100;
}


#header-container {
  position: relative;
  display: inline;
   z-index: 200;
}

.header-item {
  color: white;
  letter-spacing: 3px;
  text-align: center;
  position: absolute;

<div class="background-wrap">
  <video width="1700" height="956" autoplay muted loop id="video-background"> 
			<source src="img/reel.mp4" type="video/mp4">
			<source src="img/reel.webm" type="video/webm">
			<source src="img/reel.ogv" type="video/ogg">
			Sorry, your browser doesn't support HTML5 video.
		</video>
  <div class="row" id="header-container">
    <div class="col-md-4">
      <div class="header-item">
        <h1 id="title">Josh Kelley</h1>
      </div>
    </div>
    <div class="col-md-4">
      <div class="header-item">
        <h3 id="subtitle" href="https://vimeo.com/204080098" target="_blank">Video Production &amp; Photography</h3>
      </div>
    </div>
    <div class="col-md-4">
      <div class="header-item">
        <a id="subtitlebutton1" href="#about" class="btn btn-dark btn-lg">About Me</a>
      </div>
    </div>
  </div>
</div>

我最大的问题是当我将 .header-item 更改为 position:absolute 时。

当我使用开发人员工具检查元素时，内容被砸在上面的视频下方。您甚至可以看到“关于我”按钮已显示一半。

这是当 #header-container 更改为 position:relative 并从 .header-item 中删除位置 css 属性时的样子。

我已经用红色标记了我想要元素去的地方。任何帮助都会很棒。

【问题讨论】：

width: 500; height: 500; 应该是 width: 500px; height: 500px; 你检查你的代码片段了吗？这只是一个黑色的虚无。
是的，我检查了代码 sn-p。视频当然不会显示，但文字也不会显示。删除了 500px 的 CSS 视频大小，它应该覆盖全屏。

标签： html css twitter-bootstrap

【解决方案1】：

对不起，我没有足够的时间为您提供完整的解决方案，但是：

.background-wrap {
        position: relative;
        width: 100%;
        height: 100%; /*this has effect of 0px in your case*/
        overflow: hidden; /*this hides everything that doesn't fit to the container size*/
        top: 0;
        left: 0;
      background: #353030;
    }

您在这里指定了高度：100% 但 100% 是什么？它是顶级元素，您将其子元素的位置设置为绝对位置。所以计算的高度是0。在其他情况下没问题，但你已经将溢出设置为隐藏...... 据我了解，这就是为什么将位置设置为绝对位置时什么都看不到的原因。

您应该修正所有尺寸，请记住，如果这些孩子处于绝对位置，它们不会增长到孩子的尺寸。之后检查您的引导程序的默认配置（默认情况下是静态的，是内联的还是阻塞的等等）。

【讨论】：