The default bug view has changed. See this FAQ.

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

RESOLVED INVALID

Status

()

Firefox
General
RESOLVED INVALID
7 years ago
7 years ago

People

(Reporter: reece, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

7 years ago
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.

Comment 1

7 years ago
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
Last Resolved: 7 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

7 years ago
Interesting, thanks for the information. :)
You need to log in before you can comment on or make changes to this bug.