css - 将文本和按钮定位在视频标题的顶部

Question

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

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

kgshowroom.com/test

如您所见，主页标题中有一个循环播放的视频(不是我们的——该网站未向公众做广告，因此只需要一个示例来演示)。然而，在我把它放进去之前，就在它下面的部分(“KG Showroom”+“你在我们的网站上。”+“你好!”按钮)在顶部并位于照片顶部的中央厨房。

当我放入视频时，所有这些都被推到 div 下方(至少我猜是这样)。我希望这些元素回到循环视频的顶部。我不希望视频可以点击，但我想要“你好!”按钮可点击。

所以我在 .header-video 中添加了以下内容:

position:absolute；

z-指数:-1；

当我在 Chrome 的“检查元素”功能中添加该代码时，它显示了文本和按钮覆盖(尽管没有像我希望的那样居中)。但是，当我尝试将相同的代码上传到网站时，它根本没有显示出来。有人建议我的@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 控制定位元素的“堆栈级别”(在您的情况下为 position: absolute)。 z-index 值越高，元素在堆栈中的位置就越高。

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

希望对您有所帮助。如果您有任何问题，请在下方发表评论。

更新

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

width: 50%;
margin: 0 auto;

要删除双线，请在 HTML div 容器中删除此代码:

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

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