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)
Tracking
()
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.
Comment 1•14 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
Closed: 14 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•