Question

所以我的网站上有z-index问题，请看一下：https://displee.com/osrs-store

如果您查看每个步骤的标题，您会注意到只有第3步有一个功能区而第1步和第2步没有（如果您没有看到，请尝试放大）。步骤1和2也应该有一个功能区。我似乎无法修复它，我在所有元素上使用z-index并使用位置相对但它不起作用。我认为它与我的内容的高度或某事有关。

Answer 1

我认为您的.panel元素堆叠上下文存在堆叠问题。您正试图将<header>＆＃39; s :before置于其父母身后 - .panel。

你不能真正堆叠一个元素支持它的父母我认为，你将z-index设置为-1可能试图将元素放在它的父母身后但是显然遇到问题。

您可能需要做的是将header:before puesdo元素放在白色内容框（.panel）旁边，而不是放在它后面，只需减小它的大小，然后修复一些小问题。

在样式表（https://displee.com/css/home_style.css）中，从第548行开始更新这两个样式：

CSS

.ribbon > header:before { /*Update selector*/
    bottom: -24px;
    content: "";
    display: block;
    position: absolute;
}
.ribbon > header:before { /*Update selector*/
    border-color: transparent #3b4d56 transparent transparent;
    border-style: solid;
    border-width: 0 21px 24px 0; /*Update size*/
    height: 0;
    left: 0; /*Update to zero*/
    width: 0;
    z-index: 0; /*Update to zero*/
}

我看到this as the result。我相信这也会修复您的也必须放大问题。

Answer 2

如果我加高度：0;到我的身体元素，然后一切都是固定的。有谁知道为什么这个修复它。另外，我不认为这是解决问题的正确方法吗？

CSS否定z-index无法正常工作

2 个答案: