Question

我试过这个，但我很难与其他人联系。代码到我自己，所以我希望我可以创建这篇文章。

我一直被困在这个网站上我试图为我父亲创作。我现在正在使用模板，但是会从头开始构建，只是想弄清楚它们。

kgshowroom.com/test

正如您所看到的，主页的标题中有一个循环视频（不是我们的 - 这个网站不会向公众宣传，所以只需要一个例子来玩）。然而，在我把它放进之前，那部分就在那之下（＆＃34; KG Showroom＆＃34; +＆＃34;你在我们的网站上。＆＃34; +＆＃34;你好！＆＃34;按钮）位于顶部，位于厨房照片的顶部。

当我放入视频时，所有这些都被推下来，低于div（我的猜测，至少）。我希望这些项目能够放在循环视频之上。我不希望视频可点击，但我想要＆＃34;您好！＆＃34;按钮可以点击。

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

位置：绝对;

z-index：-1;

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

想法？

Answer 1

看看是否有效。

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

<强> ORIGINAL

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

<强> REVISED

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

关于`z-index`

的说明

请记住z-index控制＆＃34;堆栈级别＆＃34;定位元素的位置（在您的情况下为position: absolute）。 z-index值越高，元素在堆栈中的值越高。

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

我希望这会有所帮助。如果您有任何问题，请在下面留言。

<强>更新

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

width: 50%;
margin: 0 auto;

要删除双线，请将此代码删除为HTML div容器：

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

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

定位文字＆amp;视频标题上的按钮

1 个答案:

关于`z-index`