Note: There are a few cases of duplicates in user autocompletion which are being worked on.

issue about css3 opacity property and z-index specification




CSS Parsing and Computation
7 years ago
7 years ago


(Reporter: Alex Shilov, Unassigned)


Firefox Tracking Flags

(Not tracked)




(1 attachment)



7 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; ru-RU; rv: Gecko/20100401 Firefox/3.7a3pre GTB7.1 (.NET CLR 3.5.30729)
Build Identifier: 

i've found a strange implementation of opacity in modern browsers. (see the demo url).
The red link in this example treated as it has z-index:0 property, but its not.
All the specification is saying about is: "If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts". And in the mentioned  sections i've found nothing that help me.
I'm sure that browsers implementation is not quite correct. 
(css spec:
If it's not a bug than i'm asking you to explain Mozilla's interpretation.

yours sincerely.

Reproducible: Always

Steps to Reproduce:
1. put the <a> tag in absolute positioned div with positive z-index value.
2. Make the parent div of that div transparent with opacity style.
3. make the other transparent div, which would cover the absolute positioned div rather than lying under. (even if negative z-index is set).
Actual Results:  
The link is not clickable. (z-index not working)

Expected Results:  
The red link should be clickable. (z-index should work)
Created attachment 452623 [details]
current contents of

Comment 2

7 years ago
The part you quoted is the part that matters.  Non-auto computed values of opacity create a new stacking context, so the #div_with_link is at stacking level 1 in the stacking context created by #container, not in the root stacking context.  Then the stacking context for #container is at level 0 in the root, as is the one for #content, which means the latter is on top (since it comes later in the document).

This is all explained in the above-cited sections of CSS2.1, and is as clear and unambiguous as any part of CSS2.1 gets.
Last Resolved: 7 years ago
Resolution: --- → INVALID
The key parts here are:

#content {
        opacity: 0.7;
#container {
        opacity: 0.7;
        position:absolute; z-index:1; opacity: 0.7;


        <div id="container">
                <div  id="div_with_link">
                      NOT clickable
        <div id="content">

What happens here is as follows:

The z-index property on #content and #container should be ignored, since they're not positioned.

The z-index:1 on #div_with_link works, since it is positioned.  z-index defines the order of the stacking contexts within their containing stacking context.

When #container has opacity < 1, it establishes a stacking context.  This means that the z-index: 1 only lifts #div_with_link above other things in #container.

However, when you change the opacity on #container to 1, it no longer establishes a new stacking context, and the z-index:1 on #div_with_link raises #div_with_link above everything else in the page.

On the other hand, when you change the opacity on #content to 1, it no longer establishes a new stacking context, but #container still does establish a new stacking context.  Things that establish a new stacking context (like 'z-index:0') are above things that don't.  So, again, in this case, the link becomes clickable.

Thus, our behavior is correct.


Comment 4

7 years ago
Very thanks Boris and David! It's what i want to hear. 
P.S. David, I was previously mailed you this question the week before (at 14 june), the mail was probably in you spambox. =)


7 years ago
Duplicate of this bug: 603299
You need to log in before you can comment on or make changes to this bug.