如何在css中覆盖文本顶部的视频？

我正在做一件事

我想覆盖文本顶部的视频。我用来制作视频/文本的HTML代码是：

<div class="player-elements">
  <div class="grid-stack">
    <iframe class ="video" width="800" height="500" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
  </div>   
</div>

<div class="hello-world" style="">
  <p>Hello World</p>
</div>

你好，世界

我想知道我应该在CSS中做些什么更改，这样视频就可以放在“Lorem ipsum dolor sit amet，Concetetur Adipsing”的顶部了

---

我尝试添加

位置：相对、位置：绝对和z-index

，但不知何故，它似乎不起作用

css是一种样式语言，而不是用于构建内容的标记语言 您的问题来自已经存在的css代码 您可以尝试选择两个绝对位置

.grid-stack{
position: absolute;
}
.hello-world {
position: absolute;
}

---

每个页面由一堆元素组成

z-index

是一种向堆栈添加层的方法。为了创建另一个堆栈，我们必须有目的地将位置设置为固定、绝对或相对

请查看对此的更详细响应

z-index

值可以是负值或正值，但默认值为0

css

位置的不同类型是

相对的。这种类型的定位可能是最容易混淆和混淆的
滥用。它真正的意思是“相对于自身”。如果你设定
位置：相对位置；在元素上，但没有其他定位属性
（顶部、左侧、底部或右侧），它不会影响其在
总之，如果你把它放在一个位置上，它会完全一样

绝对的。这是一种非常强大的定位方式，允许您
将任何页面元素准确地放置在您想要的位置。你用
定位属性包括顶部、左侧和底部。有权设定
地点。请记住，这些值将相对于下一个值
具有相对（或绝对）定位的父元素

固定的。这种类型的定位相当罕见，但肯定有其特殊性
使用。固定位置元素相对于视口进行定位，
或者浏览器窗口本身

你可以读更多


。你好，世界{
位置：固定；
z指数：1；
}
.玩家元素{
位置：固定；
z指数：2；
}

你好，世界

首先，您需要学习如何使用spect元素：D，然后即使使用try-and-catch也可以完成您的工作

植入物到元件的z指数需要一个位置

所以你可以看到它的修正

祝你好运
它们在同一个容器下吗？你还需要为两者设置一个
位置
containers@OrthoHomeDefense是的，它们在一个分区中。您只希望视频显示在文本上吗？但是在单独的父元素中，如html示例所建议的，仍然使用iframe等？如果在
hello world
div上将z-index设置为负数，它不会显示在屏幕上……您可以使用在这里执行与在JSFIDLE.net上相同的操作。@html和css容器名称似乎不匹配。只是检查一下，你想用它实现什么？@john感谢你发现了这一点，这是一个复制粘贴错误。你的答案可以通过简单描述它的工作原理以及“位置：固定”在其中扮演的角色来改进。@JonP谢谢，我下次也会记得这样做的。
.player-elements {
   z-index: 100;
   position:relative;
}

.hello-world 
{
  text-align: center;
  font-size: 50px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
}