z-indexレベルはIEで無効です

1737 ワード

CSSでは、コードで階層を変えるしかありません.この属性はz-indexです.z-indexを機能させるには、要素のposition属性がrelative、absolute、fixedであるという小さな前提があります.
1.第1のケース(z-indexがどんなに高くても機能しない場合):この場合発生する条件は3つある:1、親ラベルposition属性がrelativeである;2、問題ラベルにposition属性がない(staticを含まない);3、問題ラベルにはフローティング(float)属性が含まれています.eg:z-indexレベルは機能せず、フローティングはz-indexを失効させる
<div style="position:relative; z-index:9999;">
    <img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>

解決策は3つあります.
1、position:relativeをposition:absoluteに変更する.
2、フローティング要素にposition属性(relative,absoluteなど)を追加する.
3.フローティングを取り除く.
   
   
   
   
2.第2のケース
IE 6では、階層の表現は、サブラベルのz-indexの高さを見るのではなく、DOM tree(ノードツリー)全体の最初のrelative属性の親ラベルの階層を見る場合があります.
eg:IE 7はIE 6と同じバグを持っています.理由は簡単です.画像のあるdivは現在のお父さんのレベルが高いですが(1000)、お父さんのお父さんが役に立たないので、9999のような強い子供が出世する日がありません.
<div style="position:relative;">
    <div style="position:relative; z-index:1000;">
        <div style="position:absolute; z-index:9999;">
            <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
        </div>
    </div>
</div>
解決策:最初のrelativeプロパティにより高いレベルを追加(z-index:1)
<div style="position:relative; z-index:1;">
    <div style="position:relative; z-index:1000;">
        <div style="position:absolute; z-index:9999;">
             <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
        </div>
    </div>
</div>