为什么文本可见，但背景不是？

Question

我有以下标记：

<div class="one">Content</div>
<div class="two"></div>

以及以下样式表：

.one, .two {
    height: 20px;
}
.one {
    background-color: #f00;
}
.two {
    background-color: #0f0;
    margin-top: -10px;
}

为什么文字Content可见，但红色背景不是？由于给定的样式表，我希望文本也只是部分可见。

为方便起见，我还创建了jsFiddle。

Answer 1

如果你想第一个div的文本只是部分可见，你需要使用position和z-index。

.one, .two {
    height: 20px;
}
.one {
    background-color: #f00;
    position: relative;
    z-index: 1;
}
.two {
    background-color: #0f0;
    margin-top: -10px;
    position: relative;
    z-index: 2;
}

http://jsfiddle.net/v5LfZ/2/