Question

假设我们有一个非常简单的HTML：

div {
    box-sizing: border-box;
    color: white;
    font-size: 28px;
    height: 100px;
    width: 200px;
}

#a { background: blue; padding-top: 40px; }
#b { background: green; margin-top: -100px; }

<div id="a">a</div>
<div id="b">b</div>

在这种情况下，元素b与元素a完全重叠，但是无论如何字母“ a”都是可见的。为什么会这样？

我已经查看了https://www.w3.org/TR/CSS2/zindex.html处的堆叠顺序规则，但找不到答案。

文本节点的位置是否不同？我想念什么？

我在此处创建了示例Codepen：https://codepen.io/anon/pen/KEaqaQ

Answer 1

您可以简单地应用position:relative;来解决此问题，它将完全覆盖另一个div。只给它保证金是行不通的。看看

div {
    box-sizing: border-box;
    color: white;
    font-size: 28px;
    height: 100px;
    width: 200px;
}

#a { background: blue; padding-top: 40px; }
#b { background: green; position:relative; margin-top: -100px; }

<div id="a">a</div>
<div id="b">b</div>

为什么文本节点出现在重叠元素的背景上方？

1 个答案: