Home/ Questions/Q 7830987
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T11:30:52+00:00

I’m defining a javascript object via the following function: function Window(vars) { this.div =

  • 0

I’m defining a javascript “object” via the following function:

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

As you can see, the Window has a div property, which is a jQuery object. In it’s instantiation, I declare the CSS classes box and text. text is not important, it’s just font stuff. Here’s the CSS for box, however.

.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 is absolute at z-index 1, and another div with nav-extension is somewhere else on the page, also absolute and at z-index 3. However, when I add the Window object to my page, it appears above anything with nav-extension. All other CSS attribues, like background, still work.

I’ve tried altering the z-index where I instantiate the div in the “css” section I’m already using, but that didn’t work either. What gives?

Edit

Also, I’ve inspected both the div with box and the one with nav-extension with Firefox, and the “Style” tab indicates they still have their intended z-index (not overridden).

#2: Changed vars.class to vars.styles.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Could you give us some DOM, please? It appears that that your box and the nav-extension-div are in different contexts. A non-static position sets up a new context, relatively to which all z-indexes inside are processed. A simple fiddle to demonstrate: 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>

    To make nav-extension appear above the box, you will either

    • set #context (or one of its parents) to a z-index higher than the one of box or
    • move the nav-extension-div outside any context
    • 0