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