css - CSS元素层顺序

我有2个这样的盒子：

<div id="box1"></div>
<div id="box2"></div>

box2有一个边框，我想用box1覆盖顶部边框，所以我对box1使用一个负的下边距，如下所示：

box1 {
background-color:white;
margin-bottom:-1px;
}

box2 {
background-color:yellow;
border:1px solid red;
}

它不会工作，但是因为box1在box2之后。我该怎么做才能更改图层顺序？我不能使用z-index，因为那是我在这种情况下不能使用的绝对位置。无论如何，只有CSS可以做到吗？

谢谢。

最佳答案

不要尝试通过移动元素来覆盖/隐藏边框，只需删除不需要的边框即可：

#box2 {
    border-top-width: 0;
}

此方法确实假定元素已经调整了margin，以便它们彼此相邻，例如：

#box1 {
    margin-bottom: 0;
}
#box2 {
    margin-top: 0;
}

关于css - CSS元素层顺序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24971704/