Question

I am trying to use z-index on some elements in a page. Basically, I have a contact form with a waiter and a response box. The contact form is used on the page in a different place and is working fine …

Send button is pressed, overlay-1 covers the form, ajax response triggers a thank-you box that covers overlay-1

Now this all works fine for the form that is positioned relatively on the page. However, I have the exact same form that pops up on-top of everything but my z-indexes aren’t being honoured even though the form uses the same classes.

Can anyone give me any pointers ?

Alex

HTML:

<div id="popuporderform" class="orderform">
    <!-- .resultBox injected here -->
    <form method="post">
        <input name="name" type="text" />
        <input class="send" type="submit" value="Send" />
    </form>

</div>
<!-- .orderspinner injected here -->

CSS:

/* -- ORDER FORM -- */
div.orderform {
    width: 220px;
    background-color: #fff;
    height: 300px;
}

// This ID is for the pop up version of the form and is not used in the
// form that is within the layout of the page
#popuporderform {        
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 200;
}

// this is the overlay with spinner in it -- this DOES overlay the form
.orderspinner {
  position: absolute;
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  z-index: 250;
  background: #fff;
}

// This is the thank-you box - it should appear over the .orderspinner (but isn't)
.resultBox {
    display: block;
    width: 150px;
    height: 100px;
    background-color: #fff;
    position: absolute;
    z-index: 300;
    border: 1px red solid;   
    color: #000;
}

FIXED:

I injected the overlay into the div rather than outside it therefore putting it into the same z-index context.

HTML:

<div id="popuporderform" class="orderform">
    <!-- .orderspinner injected here -->
    <!-- .resultBox injected here -->
    <form method="post">
        <input name="name" type="text" />
        <input class="send" type="submit" value="Send" />
    </form>

</div>

Answer 1

I had trouble with this a while back. My problem turned out to be connected to stacking context, basically when you have an element with a z-index it starts a new stacking context in within it meaning that the z-index of elements within will not be compared with z-index of elements out side.
What adds to the complexity of things is that IE 6-7 (I don’t know about 8) starts a new stacking context when elements are positioned (absolute, relative).
so i would check the elements of your popup down to the root and try and give them a high z index and see if that fixes it. with a bit of trial and error you can probably find the problem.