divレイヤーのz-index属性の調整が無効になる問題の解決方法

この記事は主に、p レイヤーの z-index 属性を調整するための無効な理由の分析と解決策を紹介します。必要な友達はそれを参照してください

z-index が無効です

その過程で、私は発見しました。非常に単純ですが、多くの人が遭遇する問題は、Z-INDEX 属性の設定が無効であることです。 CSS では、この属性はコードを通じてのみ変更できます。z-index が機能するには、小さな前提条件があります。つまり、要素の位置属性が相対、絶対、または固定である必要があります。

1. 最初の状況 (z-index がどんなに高く設定されても機能しない):

この状況が発生するには 3 つの条件があります:

1 親タグの位置属性は相対的です。 ;
2. 質問ラベルには位置属性がありません (静的を除く)。

例: z-index レベルは機能しません。floating は z-index を無効にします。コードは次のとおりです:

<p style="POSITION: relative; Z-INDEX: 9999">  
<IMG style="FLOAT: left" src="/131101/1A5494I0-0.jpg">  
</p>

3 つの解決策があります (どれでも十分です):

1. 位置を変更します。位置に相対: 絶対; 2. 浮動要素に位置属性 (相対、絶対など) を追加します。

2. 2 番目のケース

IE6 では、階層のパフォーマンスが子タグの z-index に依存せず、DOM ツリー全体の最初の相対属性の親タグに依存する場合があります (ノードツリーレベル）。

例: IE7 と IE6 には同じバグがあります。理由は非常に単純です。写真が配置されている p の現在の父親レベルは非常に高い (1000) ため、父親の父親は役に立たないのが残念です。 9999のこんな強い子がいないなんて！ 、コードは次のとおりです:

<p style="POSITION: relative">
<p style="POSITION: relative; Z-INDEX: 1000">
<p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>
</p> 
</p>

解決策: 最初の相対属性に上位レベル (z-index: 1) を追加します。コードは次のとおりです:

<p style="POSITION: relative; Z-INDEX: 1">  
<p style="POSITION: relative; Z-INDEX: 1000">  
<p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>  
</p>  
</p>

上記がこの記事の全内容です。あらゆる人の学習に役立ちます。詳細については、PHP 中国語 Web サイトにある関連コンテンツを参照してください。

関連する推奨事項:

CSS3 について remの解析（フォントサイズの設定）

以上がdivレイヤーのz-index属性の調整が無効になる問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。