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..

如您所见，Window有一个div属性，它是一个 jQuery 对象。在它的实例化中，我声明了 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;
}

box在 z-index 1 处是绝对的，另一个带有nav-extension的 div 在页面上的其他位置，也是绝对的并且在 z-index 3 处。但是，当我将Window对象添加到我的页面时，它会出现在任何带有nav-扩展名。所有其他 CSS 属性，如背景，仍然有效。

我已经尝试更改我已经div在使用的“css”部分中实例化的z-index，但这也不起作用。是什么赋予了？

编辑

另外，我用 Firefox 检查了带有box的 div和带有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>

要使导航扩展出现在框上方，您可以

  • 将 #context （或其父级之一）设置为高于 box 或
  • 将 nav-extension-div 移到任何上下文之外
于 2012-04-18T22:46:27.233 回答
1

class是 JavaScript 中的保留字，不能用作属性或变量名，也许这就是罪魁祸首。

于 2012-04-18T22:43:59.623 回答