抱歉，如果问题有点模糊，我发现很难命名。不管怎样，我目前正在创建一个新的设计，并且遇到了一个问题，我基本上希望一个 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;
}
感谢任何帮助，如果您希望我澄清任何事情，请询问。
谢谢，
杰克
不要使用
z-index:-1;z-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;
}
改为使用 z-index-1；你应该使用正 z-index 并告诉每个 div 站在哪里。
#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;
}
哦，有点晚了，答案已经在那里了:)
您可以将链接的
z-index也许是这样的？
我使用了带有类包装器的 div，如代码中所示。
.wrapper {
width: 350px;
border-radius: 0 0 16px 16px;
background-color: black;
}
希望有用..
我对“底层”的理解是：
setTimeout(componentLoaded, 2000);
function componentLoaded() {
document.getElementById('content').hidden = false;
}main { position: relative; }
main>.loading-underlay { position: absolute; }
main>.loading-wrapped { position: absolute; }
main>.loading-underlay {
width: 100%;
height: calc(100vh - 100px);
background-color: aqua;
z-index: 1;
}
main>.loading-wrapped {
max-width: 100vw;
background-color: white;
z-index: 2;
}<body>
<main>
<h1>Some arbitrary content</h1>
<div class='loading-underlay'></div>
<div class='loading-wrapped'>
<div id='content' hidden>
<!-- e.g. some component that takes a while to load ... -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
</main>
</body>这允许将样式（动画等）挂钩到
div.loading-underlaydiv.content