Closed Bug 598984 Opened 14 years ago Closed 14 years ago

Setting Opacity on a div covers floating div that shouldn't be covered

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: liquidpele, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 (.NET CLR 3.5.30729)

If you have a Div "A" that has a floating div "B" floating over it, and you set div "A" to be an opacity < 1, it covers the floating div with the opacity. 

I would expect it to not cover a div that is on top of the affected div. The major issue is that all links in the floating div are rendered un-clickable. 

Reproducible: Always

Steps to Reproduce:
Very simple HTML to reproduce:
1) create HTML file with the following HTML
2) View the HTML in firefox

<html>
<body>
	<div style='float: right; width: 200px; background-color: #FFFFCC;margin-right: 10px;'>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
		<a href='#'>Testlink</a><br>
	</div>
	<div style='height: 100px; opacity: 0.3; background-color: #FFCCCC;'>
		Opacity Div, can't click links to the left.
	</div>
	<div style='height: 100px; background-color: #CCFFCC;'>
		No opacity, you CAN click the links
	</div>
</body>
</html>
Actual Results:  
Can't click links in the floating div due to the opacity being overlayed over it instead of only over the div that the css property was applied to. 

Expected Results:  
I would expect the floating div to float over the opacity since it was already floating over the div that the css property was set on.
That is expected. Opacity establishes a stacking context:
http://www.w3.org/TR/css3-color/#transparency
That means that your div with opacity applied is positioned on top of the floated div (as it comes later in the source code). Check CSS 2.1 appendix E for the details.
http://www.w3.org/TR/CSS21/zindex.html

Webkit (Safari, Chrome) and Opera have exactly the same behaviour.
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Resolution: --- → INVALID
Interesting, thanks for the information. :)
You need to log in before you can comment on or make changes to this bug.