What has bigger priority: opacity or z-index in browsers?

Question

Hi,

I'm coding a "popup window" in javascript and I've come across an interesting thing: http://img91.imageshack.us/img91/4761/error01cropped.png - the navy square under the popup window is visible even though I would expect it to be hidden. The popup was added after the square so it should be on the top.

CSS opacity property of the navy square is 0.3 (from what I've tried it seems that every number from the interval (0,1) would yield the same result) if I change it to 1 then it behaves as expected (i.e. the part of the square under the popup is hidden).

I've tried to use z-index property and set 10 for square and 100 for the popup but it doesn't change anything.

What am I missing? Why is the part of square displayed?

Tested browsers: Firefox 3.6.x, Chrome 4

Thanks for help!

Answer 1

You might try to set the popup window's DIV like this using !important so the style doesn't change on applying new style or class:

background-color: white !important;
z-index: 100 !important;
opacity: 1.0 !important;

Then, make new CSS class:

.PopupElement
{
 z-index: inherited;
 opacity: inherited;
}

And add class to all elements in the window, like this for example:

<input value="posx" class="some_class PopupElement"/>

My guess is that this would work, since there is no priority in applying CSS attributes... as far as I know. =)

Answer 2

Example code might be needed to debug this problem.

You might put overflow: hidden and possibly position: relative in a DIV which surrounds all the editor objects to try to force the elements to only be drawn within that DIV, e.g:

<div style="overflow: hidden; position: relative">
    (Editor object buttons go here)
</div>

As a last resort, you could also try a iframe in between the two elements to try to stop them seeping through.

Answer 3

It's not a problem of opacity being more important than z-index, rather than z-index being relative to their stacking context (see z-index in the CSS2 specification).

In other words, z-index are only significant within the context of a positioned ancestor (whether its relative, absolute or fixed). What you need to do to fix your problem is add a position: relative; to the element that contain both your popup and your navy square, and probably add it a z-index: 1; . Seeing your screenshot it will probably be a top element such as a wrapper div.