HTML div not coming to top of `embed` object - IE - html

Question

I have the following HTML
<embed class='pdf_container' src='welcome.pdf' style ='width:100%;height:500px;' ></embed>
<div id="show_message" class='message_wrapper' >
<div id="message_content"> The requested operation ... </div>
</div>
and in CSS
.message_wrapper{
position:fixed;
z-index:1000;
height:100px;
width:100%;
background:red;
top:0;
left:0;
}
.pdf_container{
position:absolute;
top:0;
left:0;
z-index:100;
}
Actually i want to show the #show_message over the .pdf_container and it works well in Firefox but not in IE , it ignoring the z-index.
Please help me to figure out the problem.
Thank you.
See Screenshots:
IN IE
IN IE 8,9
and in FF
IN FIREFOX

Answer 1

You will need to set WMODE to Transparent inside the embed tag.
<embed class='pdf_container' src='welcome.pdf' style ='width:100%;height:500px;' wmode="transparent" ></embed>

Answer 2

Try this you surly get solution as i did and its working fine in my local system :-) cheerss
Little diffrent form your code but i am sure you will get it.
http://jsfiddle.net/fRsUv/
html { height:100% }
#container {
position:relative;
width:100%;
}
#pdf {
width:100%;
z-index:1;
}
#layer_over_pdf {
width:200px;
z-index:2;
}
#pdf, #layer_over_pdf {
position:absolute;
top:0;
left:0;
}
<div id="container">
<div id="pdf"><embed id="pdfEmbed" src="JavaScript_DHTML_Mat_V4.pdf" style="width:500px; height:600px" type="application/pdf"></embed></div>
<div id="layer_over_pdf">some content</div>
</div>