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

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 的文本仅部分可见，则需要使用位置和 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/