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

Posted by MartyIX on Stack Overflow See other posts from Stack Overflow or by MartyIX
Published on 2010-05-14T19:37:31Z Indexed on 2010/05/16 9:50 UTC
Read the original article Hit count: 272

Filed under:
|
|

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?

Thanks for help!

© Stack Overflow or respective owner

Related posts about z-index

Related posts about opacity