Html CSS在上一个div的下面

对不起，如果这个问题有点含糊，我发现很难确定题目。无论如何，我目前正在创建一个新的设计，我遇到了一个问题，我基本上希望一个div从另一个div下面开始，因为我以前在div上使用了圆角，希望覆盖空白

我可以将div设置为参考底图，但是当我设置z索引时，它将成为底部元素，无法与链接等进行交互。（例如，链接无法单击，无法突出显示文本）

为了更好地解释，我创建了这个链接，它准确地显示了我正在尝试做的事情。尝试单击该链接，它将根本不起作用

JSFIDLE上的代码如下所示：

#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
}

#div-1 {
background-color: grey;
}

#div-2 {
background-color: black;
position: relative;
z-index: -1;
margin-top:-25px;
}

非常感谢您的帮助，如果您想让我澄清任何事情，请尽管问

谢谢

---

Jake

你可以将链接的

z-index

更改为在第二个div上方

像这样的可能吗

正如您在代码中看到的，我使用了一个带有类包装器的div

.wrapper {
    width: 350px;
    border-radius: 0 0 16px 16px;
    background-color: black;
}

希望它有用。

演示

不要使用

z-index:-1使用
z索引：1和
z指数：2然后它就工作了

#div-1 {
    background-color: grey;
    z-index:2;
    position:relative;
}

#div-2 {
    background-color: black;
    position: relative;
    margin-top:-25px;
z-index:1;    
}

而是使用z-index-1；你应该使用正z指数告诉每个部门该站在哪里



oups，晚了一点，回答已经在那里：）
在我的实际设计中，链接有自己的div，我将div的z-index设置为99999，它仍然不允许我单击链接或与文本ah进行任何交互！刚刚意识到我现在做了什么。所以我所做的是把div-2放在所有其他元素之下，包括身体，这意味着它在所有元素之下。所以我想这就是为什么会发生的原因，谢谢，这非常有效！是的，你也没有相对定位灰色分区，z指数总是需要相对位置。谢谢你的帮助，我今天学到了一些东西：z指数需要相对位置。谢谢谢谢你的建议！
#div-1, #div-2 {
    width: 350px;
    border-radius: 0 0 16px 16px;
    position:relative;
    z-index:1;
}
#div-1 {
    background-color: grey;
}
#div-2 {
    background-color: black;
    position: relative;
    z-index: 0;
    margin-top:-26px;
}