2

z-index のトリッキーなどでは、ここで「foo」という単語が の背景画像の背後にあることは許されませdivんよね？

<div>
  <span>foo</span>
</div>

または、これを考慮してください：

<div class="a"></div>
<div class="b">
  <span class="x">X</span>
  <span class="y">Y</span>
</div>

の前にレンダリングしながら後ろ.xにレンダリングすることは可能ですか? .a.y .a

私はそうするためのテクニックを知りません。

注: これが Webkit でのみ機能する場合は問題ありません。

4

2 に答える 2

1

仕様から：

各スタッキング コンテキスト内で、次のレイヤーが後ろから前に描画されます。

  1. スタッキング コンテキストを形成する要素の背景と境界線。
  2. 負のスタック レベルを持つ子スタック コンテキスト (最も負の値が最初)。
  3. インフロー、非インライン レベル、非配置の子孫。
  4. 配置されていないフロート。
  5. インライン テーブルとインライン ブロックを含む、インフロー、インライン レベル、位置付けされていない子孫。
  6. スタック レベル 0 の子スタック コンテキストと、スタック レベル 0 の配置された子孫。
  7. 正のスタック レベルを持つ子スタック コンテキスト (最初に最小の正)。

子は常に親要素の背景の後に描画されることに注意してくださいz-index。背景の前に子供にペイントさせることはできないため、CSS でこれを行う方法は実際にはありません。

于 2012-12-06T04:45:30.283 に答える
1

あなたが尋ねた質問を解決したようです。この jsfiddle をチェックしてください: http://jsfiddle.net/cAZQP/1/。問題の要素を色付きの正方形にして見やすくし、作成されたレイヤーを確認するためにそれらを少し間隔を空けて配置しました。

これらのスタイルは機能しているようです:

<style>

.a, .x, .y {
    position: absolute;
}
.x {
    z-index: -1;
}

</style>
于 2012-12-06T04:56:09.793 に答える