2

次の関数を使用して JavaScript の「オブジェクト」を定義しています。

function Window(vars) {
    this.div = $("<div/>", {
        id: vars.id,
        class: vars.styles + " box text",
        css: {
            top: vars.top,
            left: vars.left
        }
    });
    this.div.appendTo( $("body") );
    // more stuff happens..

ご覧のとおり、 には jQuery オブジェクトであるプロパティがありますWindow。divそのインスタンス化では、CSS クラスのboxとtextを宣言します。テキストは重要ではなく、ただのフォントです。ただし、これはboxの CSS です。

.box {
 z-index: 1;
 position: absolute;
 background: #222222;
 min-width: 10%;
 text-align: center;
 padding: 5px;
}
.nav-extension {
 z-index: 3;
 padding: 8px;
 background: #000000;
 position: absolute;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-topright: 5px;
 border-bottom-right-radius: 5px;
 border-top-right-radius: 5px;
}

ボックスは z-index 1 で絶対的であり、 nav-extensionを持つ別の divはページの別の場所にあり、これも絶対的で z-index 3 にあります。ただし、Windowオブジェクトをページに追加すると、nav-延長。背景など、他のすべての CSS 属性は引き続き機能します。

div既に使用している「css」セクションでインスタンス化する z-index を変更しようとしましたが、それもうまくいきませんでした。何を与える？

編集

また、ボックス付きの div と Firefox付きの nav-extension付きの div の両方を調べたところ、[スタイル] タブには、意図した z-index (オーバーライドされていない) がまだあることが示されています。

#2 :vars.classに変更vars.styles。

4

2 に答える 2

2

DOM を教えてください。ボックスと nav-extension-div は異なるコンテキストにあるようです。非静的な位置は、z-index内部のすべての es が相対的に処理される新しいコンテキストを設定します。実証する簡単なフィドル: http://jsfiddle.net/3KTyz/

<body>
    <style>
        .box { z-index:1; }
        .nav-extension { z-index:3; }
    </style>
    ...
        <div id="context" style="position:relative"><!-- or absolute or fixed -->
             ...
                 <div class="nav-extension"><!--
                 will be positioned +3 relatively to other elements in #context
                 -->...</div>
        </div>
    <div class="box"><!--
    will be above #context, which has (implicit) z-index:0
    -->...</div>
</body>

ボックスの上に nav-extension を表示するには、次のいずれかを行います。

  • #context (またはその親の 1 つ) を、ボックスまたは
  • nav-extension-div をコンテキストの外に移動する
于 2012-04-18T22:46:27.233 に答える
1

classは JavaScript の予約語であり、プロパティまたは変数名として使用できません。これが原因である可能性があります。

于 2012-04-18T22:43:59.623 に答える