5

次のHTMLが与えられます：

<div class="foo">howdy howdy howdy how</div>
<div class="bar">Hello</div>​

および次のCSS：

.foo {
    background-color:green;
    overflow:hidden;
    height:.75em;
}

.bar {
    color: white;
    background-color: red;
    margin-top: -10px;
    width: 200px;
}

レイヤーの順序は次のようになります。

奇妙なレイヤーの順序

関連するjsfiddleは次のとおりです。http：//jsfiddle.net/q3J8D/

赤い背景が黒いテキストの上にあると思いますが、なぜ黒いテキストが赤い背景の上にあるのかわかりません。

を使用してこの問題を修正できますposition: relativeが、興味があります。

赤い背景の上に黒いテキストがあるのはなぜですか？

私は特に、この振る舞いを説明する公式の情報源/標準を探しています。

4

2 に答える 2

3

スペックを何度も読んだ 後でも、それを理解するのに少し時間がかかりました。また、リンクされた質問に対するBoltClockの回答も。

しかし、説明は簡単なようです。これらは同じスタッキングコンテキスト（ルートコンテキスト）内の2つの静的な（つまり、配置されていない）ブロックレベルの要素であるため、次の順序で描画されます。

  • の背景#foo
  • の背景#bar
  • のテキストコンテンツ#foo
  • のテキストコンテンツ#bar

したがって、質問に表示される出力。

ペイントの順序は、CSS2.1仕様の付録Eで説明されているアルゴリズムによって決定されます。付録にはありませんが（ここで言及されています）、アルゴリズムは各スタッキングコンテキスト（各要素ではなく）に再帰的に適用されます。

于 2012-06-20T20:37:31.370 に答える
-1

http://www.w3.org/TR/CSS21/visuren.html#z-index

「この例は、透明度の概念を示しています。背景のデフォルトの動作では、背後のボックスが表示されます。この例では、各ボックスがその下のボックスに透過的にオーバーレイされます。この動作は、既存の背景の1つを使用してオーバーライドできます。プロパティ"

于 2012-06-20T20:58:45.550 に答える