element with opacity gets behind iframe in firefox

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);
}