Question

对于大多数新开发者来说，我确信这是一个非常混乱的问题。我很抱歉，如果之前有人询问这个问题，但我很长时间都找不到解决方案。

我正在尝试创建一个视频封面背景，在它上面放置一些div，然后继续在它下面制作div。

当我开始在视频封面下工作时，事情变得有点复杂。 - 它们显示在下面是可以的，但是使用例如边距或放置标签来设置它们会立即影响视频封面div，这会让人感到困惑。

这是我的代码：

<html>
<head>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="header">
    <div class="header-video" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro-video-poster.jpg?v=1.1.65') 50% bottom no-repeat;">
      <video preload="none" poster="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/empty.gif" autoplay loop>
      <source src="https://cont-edu.technion.ac.il/wp-content/themes/cont-edu/assets/images/intro.mp4?v=1.1.65" type="video/mp4">
      </video>
    </div>
    <div class="header-bg js-parallax" style="background: #0e284d url('https://cont-edu.technion.ac.il/wp-content/uploads/2016/04/intro-home.jpg') 50% 0 no-repeat;">
    </div>
  </div>
  <div style="z-index: 100;">
    <p>
      some text here
    </p>
</body>
</html>

preview pen

我愿意在座位顶部放置一个视频封面。然后在视频上方添加一些内容。然后继续在视频下添加内容，而不会影响视频及其上述内容的位置和样式。

任何帮助都是有益的。谢谢！

编辑：在视频下我的意思是网页...实际上不在视频下。

Answer 1

不确定这是否是使其正常工作的专业方式。我不得不在视频下创建另一个div。它也必须包含一些内容。

我添加了一个可见性设置为隐藏的div。

然后我可以继续处理页面的其余部分。

我会批评有关该主题和改进的任何进一步评论。

谢谢你！

z-index和位置属性间距

1 个答案: