Css z索引和位置属性间距_Css

Css z索引和位置属性间距

css

Css z索引和位置属性间距,css,Css,我相信这对大多数新开发人员来说是一件非常令人困惑的事情。如果以前有人问过这个问题，我很抱歉，但我很长时间都找不到解决办法我正在尝试创建一个视频封面背景，在上面放置一些div，然后在下面继续制作div 当我开始在视频封面下工作时，事情变得有点复杂。 -它们出现在下面是可以的，但是使用例如边距或放置标记来设置它们的样式会立即影响上面的视频封面div，这是令人困惑的这是我的代码： <html> <head> <link href="style.css" rel=

我相信这对大多数新开发人员来说是一件非常令人困惑的事情。如果以前有人问过这个问题，我很抱歉，但我很长时间都找不到解决办法

我正在尝试创建一个视频封面背景，在上面放置一些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>



这里有一些文字

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

任何帮助都将被估价。谢谢

编辑：我所说的视频下方是指网页下方。实际上不是视频下方。

不确定这是否是使其正常工作的专业方法。我不得不在视频下再制作一个div。它还必须包含一些内容

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

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

我将感谢您对本主题的进一步评论和改进

谢谢大家!

看看这个：。尝试使用从0到高的z-index，因为在浏览器的心目中，负值不重要/根据逻辑堆叠。谢谢你的回复，我实际上已经尝试过了。但在您的示例中，视频下也没有内容。。当我指的是在下面时，我指的是在页面下面，而不是在视频下面。对不起，你能再检查一下吗？我真的不明白你做了什么。。我的问题是，我想要一个封面背景与现场视频，与一些内容超过它。然后继续在页面中添加更多内容，而不让两个部分互相拦截。