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

This post has some interesting links to information about z-indexes and opacity: http://stackoverflow.com/questions/2837057/what-has-bigger-priority-opacity-or-z-index-in-browsers — Pete, Jan 28 '13 at 10:28
I should probably let you know that when I try this, the PDF opens in a separate window (in Acrobat, not in a browser), and your bar looks fine (even when I tell your iframe to have a background colour so I can see it). Possibly the Acrobat plugin insn't playing nicely with the opacity rendering? — Gareth Cornish, Jan 28 '13 at 10:30
@GarethCornish update the plugin and it should open within the page, mine does. I'll try and switch the content of the iframe but i think its not the problem — mfreitas, Jan 28 '13 at 10:33
@GarethCornish i'm starting to think you're right, its either the type of file sourced in the iframe or the acrobat plugin :\ and updated fiddle shows that setting a webpage in the iframe fixes the opacity problem — mfreitas, Jan 28 '13 at 10:44

score 2 · Answer 1 · edited Dec 11 '13 at 23:38

2

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

edited Dec 11 '13 at 23:38

Preview

35,317
10
92
112

answered Dec 11 '13 at 23:05

user2776670

21
3

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

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

edited May 23 '17 at 11:56

Community

1
1

answered Jan 28 '13 at 10:32

Панайот Толев

6,597
5
19
28

i've already tried window mode opaque, still the same result. – mfreitas Jan 28 '13 at 10:35

score 0 · Answer 3 · answered Mar 05 '13 at 01:40

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/

also, as a side note, iframes are depreciated, i suggest using something else, like the jquery load function — chadybear, Mar 05 '13 at 01:41

element with opacity gets behind iframe in firefox

3 Answers3