如何在iFrame上显示Div或Panel

Question

如何在iframe上显示面板。我已经尝试过使用z-Index，但它无法正常工作，请查看示例图像。我没有尝试使用css我使用Z-Index，但它不起作用。 以下是我的代码......

<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

您应该查看使用position:absolute CSS样式。

这是一个例子......

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

使用以下示例CSS ...

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

请参阅this jsfiddle live demo