将文本和按钮置于视频之上 Header

Question

我试着查找它，但我很难将其他人的代码与我自己的代码联系起来，所以我希望我创建这个 post 没问题。

我一直停留在我试图为我父亲创建的这个网站上。我现在正在使用模板，但会从头开始构建，只是想弄清楚各个部分。

kgshowroom.com/test

如您所见，主页的 header 中有一个循环播放的视频（不是我们的 - 此站点未向 public 宣传，因此只需要一个示例玩）。然而，在我把它放进去之前，它正下方的部分（"KG Showroom" + "You're on our site." + "Hello!" 按钮）位于顶部并位于厨房照片的顶部。

当我放入视频时，所有这些都被推到 div 以下（至少是我的猜测）。我希望这些项目回到循环视频的顶部。我不希望视频可点击，但我希望 "Hello!" 按钮可点击。

所以我将以下内容添加到.header-video:

位置：绝对；

z-index:-1;

当我在 Chrome 的 "Inspect Element" 功能中添加该代码时，它显示了文本和按钮覆盖（虽然没有像我希望的那样居中）。但是，当我尝试将相同的代码上传到网站时，它根本没有显示出来。有人建议我的@media 查询可能会覆盖代码，但我在代码中的任何地方都找不到“@media”。

想法？

Answer 1

看看这是否有效。

在您的样式表中编辑此代码块。

原版

#header .inner
        {
            position: relative;
            z-index: 1;
            margin: 0;
            padding: 4em 0 0 0;
        }

修订

#header .inner
        {
            position: relative;
            z-index: 1;
            margin: 0;
            top: -210px;
         }

关于 `z-index` 的注释

请记住，z-index 控制定位元素的 "stack level"（在您的例子中是 position: absolute）。 z-index 值越高，元素在堆栈中的位置就越高。

因此，当您将 z-index 值指定为 -1（如您的问题）时，您是在告诉该框堆叠在具有更高值（例如 0）的任何其他框的下方。如果您希望某些内容始终显示在其他所有内容之上，请给它一个较高的 z-index 值，例如 999。

希望对您有所帮助。如果您有任何问题，请在下方留言。

更新

要将 KG 陈列室框居中，请将这些规则添加到 #header .inner 声明块：

width: 50%;
margin: 0 auto;

要删除双线，请删除 HTML div 容器中的此代码：

<hr>
::before
::after
</hr>

删除后，如果要调整间距，只需使用padding和margin属性即可。

将文本和按钮置于视频之上 Header

Positioning Text & Button on top of Video Header

css

css-position

z-index

关于 `z-index` 的注释