Question

how can i show panel over iframe. I have tried using z-Index but its not working check out the sample image. We’ll I didn’t tried using css i use Z-Index but it is not working.
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 using the position:absolute CSS styling.

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>

With the following example CSS…

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

Please see this jsfiddle live demo