CSS元素图层顺序

Question

我有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吗？

谢谢。

Answer 1

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

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

这种方法确实假设元素已调整margin，以便它们彼此相邻，例如：

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