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

Filed under:

z-index

|

opacity

|

weird-behaviour

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

SQL SERVER – Force Index Scan on Table – Use No Index to Retrieve the Data – Query Hint

as seen on SQL Authority - Search for 'SQL Authority'
Recently I received the following two questions from readers and both the questions have very similar answers. Question 1: I have a unique requirement where I do not want to use any index of the table; how can I achieve this? Question 2: Currently my table uses clustered index and does seek operation;… >>> More
Covering Index versus Clustered Index (Database Index)

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I'm working on a database system and it's indexes, but I'm having a really hard time seing the clear difference between a covering index and a clustered index. I've googled my way around but hasn't got a clear cut answer on: What is the differences between the two types of indexes When do… >>> More
SQL SERVER Force Index Scan on Table Use No Index to Retrieve the Data Query Hint

as seen on Dot net Slackers - Search for 'Dot net Slackers'
Recently I received the following two questions from readers and both the questions have very similar answers.Question 1: I have a unique requirement where I do not want to use any index of the table; how can I achieve this?Question 2: Currently my table uses clustered index and does seek operation;… >>> More
Createing a new Index in SQL when current records don't meet that index

as seen on Stack Overflow - Search for 'Stack Overflow'
Hey all- I'd like to add an index to a table that already contains data. I know that there a few records currently in the table that are not unique with this new index. Clearly, MySQL won't let me add the index until all of them are. I need a query to identify the rows which currently have the… >>> More
After adding index Execution Plan SqlServer keeps suggesting the index

as seen on Stack Overflow - Search for 'Stack Overflow'
If I run the execution plan of an sp, Management Studio suggests an index. I add the index, run the execution plan again, and it keeps suggesting the same index... What am I doing wrong here? I already restarted SqlServer and Management Studio, but that's doesn't help. >>> More

Related posts about opacity

jQuery 1.4 Opacity and IE Filters

as seen on West-Wind - Search for 'West-Wind'
Ran into a small problem today with my client side jQuery library after switching to jQuery 1.4. I ran into a problem with a shadow plugin that I use to provide drop shadows for absolute elements – for Mozilla WebKit browsers the –moz-box-shadow and –webkit-box-shadow CSS attributes are used but for… >>> More
Reducing the opacity on a div without reducing the opacity of the contents

as seen on Stack Overflow - Search for 'Stack Overflow'
Want to reduce the opacity of page contents container background without reducing the opacity of the contents. <div id="container"> <div id="page contents"> page contents goes here, like amazing articles and all that. </div> </div> Needs to be able to expand with… >>> More
.NET/C#: How to remove/minimize code clutter while 'triggering' Events

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I just wanna find out if there's a way I could minimize code clutter in my application. I have written code/s similar to this: private void btnNext_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e) { btnNext.Opacity = 1; } private void btnNext_MouseLeave(object… >>> More
CSS - Opaque text on low opacity div?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have a div with 60% opacity, to show part of a background image behind the div. Because the opacity is at 60%, the text in that div appears as grey. Is there anyway to override this level and make the text appear black? Any advice appreciated. Thanks. >>> More
jQuery simplifying code (beginner)

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm getting to grips with jQuery but find myself repeating code over and over again... Surely there's a simpler way to write this: $('#more-mcr, #more-hilton, #more-lpool').hide(); $('#mcr-hatters').hoverIntent(function() { $('#mcr-hilton').stop().animate({opacity:… >>> More