CSS 元素层顺序答案

【问题标题】：CSS elements layers orderCSS 元素层顺序
【发布时间】：2014-07-26 13:51:27
【问题描述】：

我有两个这样的盒子：

<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 来实现吗？

谢谢。

【问题讨论】：

如果我没记错的话，z-index 只适用于定义了position 样式的元素
我知道，我需要知道是否有未定位元素的替代方法。
你能重新排列 html 吗？切换 box1 和 box2 位置，它会自动更改它们的 zindexing。不，您不必将定位设置为绝对。您也可以将其设置为相对，只要您通过 css 为 position 设置值，zindex 就会起作用
好把戏，我不知道。谢谢！

标签： css layer

【解决方案1】：

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

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

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

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

【讨论】：