Incorrect Layering of overlapping DIVs if one uses opacity




12 years ago
6 years ago


(Reporter: Dave Lindquist, Unassigned)


1.8 Branch
Windows XP

Firefox Tracking Flags

(Not tracked)




12 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/20060508 Firefox/
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/20060508 Firefox/

When rendering two divs that overlap, if the "bottom" (ie, lowest implicit z-index) DIV uses opacity, it will appear over top of the "top" DIV.

For example, this:

		<div style="background-color: blue;width:100%;height:37px; opacity: 0.8;">
		<div style="background-color: red;width: 100px;height:100px;margin-top:-37px;">

shows the "blue" DIV _over top of_ the "red" DIV, due to the opacity on the first (blue) DIV.

1) remove the "opacity" from the "blue" DIV -- "red" will display "on top".
2) add an "opacity: 0.99;" to the "red" DIV.

That is, it works if neither or both use opacity.  It also appears to work if only the "red" (ie, second) item has opacity (but not the first "blue" item).

Reproducible: Always

Steps to Reproduce:
1. Create a DIV with width & height and opacity of non-1/non-0
2. Create a second DIV with width & height and no opacity, use negative margin-top to position it "over" the first DIV.
3. The DIV from #1 will appear *OVER* the DIV from #2 (incorrectly).
4. Turn off opacity on #1.
5. It will no longer render "OVER" #2. (correct behaviour)

Actual Results:  
(see above)

Expected Results:  
(see above)

Reproduced on:
1) Firefox 1.5 on Windows XP
2) Firefox 1.5 on Linux / XOrg 7.0

Does not occur in Internet Explorer.

CSS Z-Index manipulation appears to have no effect on this.

This problem occurs regardless of whether you use "style" or "class".

"opacity: 1.0;" on the second DIV does NOT solve problem -- it works the same way as no opacity at all.

WORKAROUND: Use "opacity: 0.99;" on the second DIV (which appears pretty much the same as no opacity).
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Summary: Rendering: Incorrect Layering of overlapping DIVs if one uses opacity → Incorrect Layering of overlapping DIVs if one uses opacity
Version: unspecified → 1.8 Branch

Comment 1

11 years ago
opacity < 1.0 forms a stacking context (CSS2.1:9.9.1). The blue box renders over the red one, as it should.

Comment 2

10 years ago
I confirm this bug. Thanks for the circumvention.

Comment 3

10 years ago
I have a bug in the same idea:

With your exemple with a little modification:

        <div id="test1" 
	     style="background-color: blue;width:100%;height:37px; opacity:0.8;"
	     onmouseover="getElementById('test2').style.display = 'block';"
	     onmouseout="getElementById('test2').style.display = 'none';">
        <div id="test2" 
	     style="position:absolute; background-color: red;width:100px;height:150px;margin-top:-37px; display:none; opacity:0.99;">
	<div id="test3" 
	     style="background-color: yellow;width:100%;height:37px; opacity:0.8;"
	     onmouseover="getElementById('test2').style.display = 'block';"
	     onmouseout="getElementById('test2').style.display = 'none';">
	<div id="test4" 
	     style="background-color: green;width:100%;height:37px;"
	     onmouseover="getElementById('test2').style.display = 'block';"
	     onmouseout="getElementById('test2').style.display = 'none';">

You can see that the blue layer is under because it comes before the red one. The yellow one in on the red layer because it comes after.
The problem is that the red one should be on top of all the other because its position is absolute (I think).
If I create a last layer (the green one) without opacity attribut, you can see that the red one is on top of it (like it should be?).

I have no circumvention for the moment. opacity:0.99 doesn't work as you can see.

Comment 4

10 years ago
You can use z-index in your css (or in the style attribut).
It specifies the stack position of your div -> "z-index:10;" in the style of your div id="test2" layer and everything is working fine.
But it seems to me that it's hidding a bug.

Sorry for my english.
This is a duplicate of bug 401682.
Marking as dupe.
Last Resolved: 6 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 401682
You need to log in before you can comment on or make changes to this bug.