2

对不起，如果这个问题有点模糊，我发现它很难命名。无论如何，我目前正在创建一个新设计并且遇到了一个问题，我基本上希望一个 div 从另一个 div 开始，因为我之前在 div 上使用圆角边缘并想要掩盖空白。

我能够让 div 成为底层，但是当我设置 z-index 时，它成为底部元素，并且无法完成与链接等的交互。（例如无法点击链接，无法突出显示文本）

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

JSFiddle上的代码如下：

#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;
}

任何帮助表示赞赏，如果您希望我澄清任何事情，请询问。

谢谢，

杰克

4

4 回答 4

4

演示 http://jsfiddle.net/Amn7S/

不要使用z-index:-1;usez-index:1;然后z-index:2;它的工作原理。

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

#div-2 {
    background-color: black;
    position: relative;
    margin-top:-25px;
z-index:1;    
}
于 2013-07-13T16:04:05.747 回答
2

而是使用 z-index-1；你应该使用正 z-index并告诉每个 div 站在哪里。

http://jsfiddle.net/wdQWu/3/ 

#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;
}

哎呀，有点晚了，已经回答了:)

于 2013-07-13T16:08:57.437 回答
0

您可以将z-index链接更改为高于第二个 div

于 2013-07-13T15:55:18.887 回答
0

可能是这样的？

http://jsfiddle.net/wdQWu/1/

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

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

希望有用。。

于 2013-07-13T16:01:37.860 回答