2

私は次のマークアップを持っています：

<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も作成しました。

4

1 に答える 1

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/

于 2013-01-29T13:48:44.657 に答える