How can I show a Div or Panel Over iFrame

Question

how can i show the panel above the iframe. I tried using z-Index, but did not work, checking the sample image. We will not use css to use the Z-Index, but it does not work. Below is my code ...

<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr align="left"><td align="left"><iframe width="70%" frameborder="0" height="770" id="myframe" runat="server" src="about:blank"></iframe></td></tr></table> <div class="slide-out-div"><a class="handle" href="http://link-for-non-js-users">Content</a><h3 class="style1">Menu Items</h3><table border="0"> <tr style=" float:left; height:39px"><td><ul><li><a href="">Special Instructions</a></li></ul></td></tr> <tr style=" float:left; height:39px"><td><ul><li><a href="">Processing Exception</a></li></ul></td></tr> <tr style=" float:left; height:39px"><td><ul><li><a href="">Account Coding</a></li></ul></td></tr> <tr style=" float:left; height:39px"><td><ul><li><a href="">View My Notes</a></li></ul></td></tr> <tr style=" float:left; height:39px"><td><ul><li><a href="">Approve/Disapprove</a></li></ul></td></tr> <tr style=" float:left; height:39px"><td><ul><li><a href="">Save & Close</a></li></ul></td></tr> </table> </div> 

Answer 1

You should look at the style of position:absolute CSS.

Here is an example ...

 <div id="straddle"> Here is the straddling div<br/> Here is the straddling div </div> <iframe id="myframe" src="about:blank"></iframe> 

In the following CSS example ...

 #myframe { height:100px; width:200px; margin-left:100px; } #straddle { position:absolute; width:200px; border:1px solid red; } 

Check out this jsfiddle demo