2

これは高度な CSS の質問です。

JSFiddle 内: (Chrome 26.0、Firefox 20.0、および IE 10 でテスト済み)

http://jsfiddle.net/4yRrm/10

親はスタック コンテキストを確立し、子は親よりも高い z-index を持ち、親を覆い隠します。これで問題ありません。

しかし、 http://jsfiddle.net/4yRrm/11ではどうですか

これで、子の z-index が親よりも低くなります。子のテキストが親のテキストの下に表示されるようになりました (親のテキストが青色で表示され、子のテキストの黒色が覆われているのがわかります) 。仕様であなたの答えを実証してください。なぜそのような行動があるのですか?それは特定の目的を達成しますか?

このままでは、親の背景が最下層、その次に子の背景、その次に子のテキスト、その次に親のテキストという具合です。したがって、親の絵は「極限」にあります。背景が最下層、テキストが最上層であり、子のコンテンツはこれら 2 つの極限の内側に「挟まれて」います。

関連するのは、親がスタック コンテキストを確立するときに、背景であっても親を子の上に完全に移動させるにはどうすればよいかということです。を削除したり、親のpositive: relativeを​​削除したりしないでください。子のスタック コンテキストを確立できません。z-index: 0つまり、親は、、またはpositionのいずれかの を持たなければならず、同時に整数の を持たなければなりません (また、 にすることはできません)。relativeabsolutefixedz-indexauto

4

3 に答える 3

0

あなたのテキストノード：

Hello Chip Hello Chip Hello Chip Hello Chip

スタッキング コンテキストも取得します。

  1. #chip01:imaginary-stack-context: 0
  2. #chip01 "Hello Chip..."-imaginary-stack-context: 1
  3. #chip02-imaginary-stack-context: 0
  4. #chip03- imaginary-stack-context: 0( / z-indexesz-index: -1を持つ他のすべての要素の背後にあるため。)positiveauto

CSS 2.1 仕様は、@BoltClock によって既に提供されています。

ここに画像の説明を入力

于 2013-05-12T08:00:40.940 に答える