1

によると：mozilla.org

CSS マッチングの優先順位は次のとおりです。

  • ユニバーサルセレクター
  • タイプセレクター
  • クラスセレクター
  • 属性セレクター
  • 疑似クラス
  • ID セレクター
  • インライン スタイル

CSS コード:

body div#redDiv.myClass{
    position:absolute;
    top:10px;
    left:10px;
    width:10px;
    height:10px;
    background-color:red;
    z-index:99999999999;
}
#blueDiv{
    position:absolute;
    top:15px;
    left:15px;
    width:10px;
    height:10px;
    background-color:blue;
}

HTML:

<div id="blueDiv" style="z-index:99999999999;"></div>
<div id="redDiv" class="myClass" style="z-index:99999999998;"></div>

したがって、redDiv と blueDiv の 2 つの div がある場合:

  • redDiv には、body id とクラス セレクターの組み合わせを使用する CSS 定義があり、z-index プロパティは "99999999999" に設定されていますが、その css を "99999999998" にオーバーライドするインライン定義があります。
  • blueDiv のインライン css は "99999999999" に設定されています。

予想される動作は、redDiv の上にある blueDiv であるはずですが、逆のことが起こり、オーバーライドが行われていないようです! ただし、「99」や「98」のように値が小さい場合、blueDiv は redDiv より上になります ( http://jsfiddle.net/9U2fU/1/ )。

誰でも何が問題なのか指摘できますか?

redDiv のオリジナル CSS を変更できないので、インライン スタイル定義を追加して問題を解決する必要があります。

間違ったオーバーライドの JSFiddle の例

4

1 に答える 1

1

私はこれを突き刺し、コメントに同意します。あなたの数値は32ビットの整数よりも大きく、最大のz-indexはそれよりも小さく、問題の原因である可能性がありますが、テストしていません。... 9 のように減らしてみて、何が起こるか見てみましょう。

于 2013-04-01T17:26:00.883 に答える