0

これは私のコードです:

<div id="first">
    <div id="first-internal">&nbsp;</div>
</div>

<div id="fixed">&nbsp;</div>

#first
{
    position:relative;
}

#first-internal
{
    position:relative;
    z-index:100;
    background-color:blue;
    width:400px;
    height:400px;
}

#fixed
{
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    background-color:red;
    z-index:41;
}

見えないのはなぜ#fixedですか？これは の後#firstなので、 よりも多くの「z-index ポイント」が必要#firstです。( have#fixedの子の場合も)のコンテンツを表示する必要があります。#firstz-index:9000

4

3 に答える 3

2

z-index が大きいブロックは、常に一番上にある必要があります。仕様を読むと、z-index を配置すると新しいスタック コンテキストが作成されることがわかります。つまり、HTML の順序やCSS。

したがって、あなたの場合、#fixed は #first-internal よりも低い z-index を持っているため、#first-internal が一番上にあります。それで全部です ;）

ところで、このスタック コンテキストは IE で正しく実装されておらず、動作が異なります。

于 2012-06-21T07:49:40.033 に答える
1

css ビジュアル フォーマット モデルのドキュメントにリンクされているように、コンテキストをスタックすることがすべてです。n のコンテキスト:body

  • #first(Z インデックスなし)スタック レベル 0 の配置された子孫としての資格があるこの要素は、新しいスタッキング コンテキストを開始しません(詳細については以下を参照してください)。

  • #fixed(z-index > 0) は正のスタック レベルを持ち、より高いレベルでレンダリングされます

そのため、子孫の z-index をどれだけ高く設定#firstしても、それらは依然として下位のスタックに残ります。#first

これらの動作は、リンクされたドキュメントで説明されているように、レイヤー 6 と 7 の動作とそれぞれ同じです。

アップデート：

私はいつもMDN docosの方が理解しやすいと思っていました。基本的に、新しいスタッキング コンテキスト#first を開始しません(相対的に配置されますが、デフォルトの がありますz-index:auto)。

これは、同じスタッキング コンテキスト内でレンダリングし、より高い z-index を持つコンテキストが一番上にレンダリングされる#first-internalことを意味します。#fixedこれは、リンクされた元の仕様で説明されているレイヤー 6 の動作です。

于 2012-06-21T08:19:34.660 に答える
-1

要素を作成するときposition:absolute、ドキュメント内のスペースは必要ありません。むしろ、浮いているかのように動作します。そして、position:absoluteオブジェクトが。よりも小さいz-indexというHTML/CSSの基本的な性質ですposition:relative。

これは、オブジェクトには独自の存在があり、要素position:relativeとして浮かないためです。absolute

以下にいくつかのリンクを投稿しました。これらの2つのプロパティについて簡単に説明できます。

これがあなたの質問を明確にすることを願っています。

于 2012-06-21T08:02:50.900 に答える