element with opacity gets behind iframe in firefox - html

Question

I have an element (bar) positioned over an iframe, if i set an opacity on that element it stays under the iframe, even if that item has a bigger z-index than the iframe.
However, if i create a container (foo) around that element and the iframe, and set the opacity there, the (bar) element stays in front of the iframe like intended.
CSS:
#bar {
width:100px;
opacity:0.5;
height: 150px;
position:relative;
top:100px;
z-index:2;
background:red
}
#foo {
/* opacity:0.5; */
}
HTML
<div id="foo">
<div id="bar">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<iframe src="http://www.adelaide.edu.au/myuni/tutorials/docdesign/guides/docDesignGuide_KeepPDFsmall.pdf" width="200px" height="200px" frameborder="0" style="z-index:-1"></iframe>
</div>
Creating that container would solve my problem, but i cannot do that because my current markup doesn't allow it. I would need the opacity to stay in the bar element.
This only happens in Firefox, and the content of the iframe is a .pdf file.
How can i get the bar element to stay on top of the iframe while maintaining its opacity setting?
fiddle here
UPDATE:
It seems the problem is related to the fact that i'm sourcing a pdf file instead of a webpage in the iframe.
updated fiddle
Thanks in advance

Answer 1

If you use background: rgba(255,255,255,0.5) other element will not be effected by the translucent background.
In the example that I provided the rgb color(255,255,255) is white when you use rgba the last digit is use to set the opacity, .5 would be 50% translucent.
#foo {
background: rgba(255,255,255,0.5);
}

Answer 2

Look at those links. I think that is a discussion of your problem:
StackOverflow and Adobe statement for this problem
I found one more theme to discuss this. As your case they use pdf iframe:
Link here

Answer 3

from what i understand, you want the text to be above the picture, and transparent?
i did something like this on the cover page one of my older sites, chadwaddell.info.
I made a container div, and then put the picture in its own div, and the text in its own div.
set the container position to relative, and the picture position to absolute. also, i would use rgba to do the opacity like this
#bar {
width:100px;
opacity:0.5;
height: 150px;
position:relative;
top:100px;
color: rgba(3,3,3,0.5)
background:rgba(255,0,0,0.5)
}
i went onto your fiddle, and did what i was trying to say, hope this helps http://jsfiddle.net/N9cZp/23/