Closed Bug 598984 Opened 15 years ago Closed 15 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: 15 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.