我如何使 iframe 位置高于其他位置答案

【问题标题】：How do i make the iframe position above the rest我如何使 iframe 位置高于其他位置
【发布时间】：2012-09-05 08:22:34
【问题描述】：

我想要做的是让 iframe 浮动在其余内容之上。 zindex 似乎没有工作

<html>  
<head>
<script language="JavaScript" type="text/javascript">
function makeFrame(src) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src","http://www.google.com");
ifrm.style.display = "block";
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
ifrm.style.position = "absolute";
ifrm.style.zIndex= "2";
document.body.appendChild(ifrm);
}

function closeFrame(){
ifrm.style.display = "none";
}
</script>
</head>
<body>
<img src="" onmouseover=makeFrame() onmouseout=closeFrame() height="100px" width="100px" />
</body>
</html>

【问题讨论】：

标签： javascript html css iframe z-index

【解决方案1】：

这是你的工作演示

http://jsfiddle.net/REzpg/

和你的代码

<script language="JavaScript" type="text/javascript">
function makeFrame(src) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src","http://www.orbees.com");
    ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.style.display = "block";
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
ifrm.style.position = "absolute";
ifrm.style.top="0px";
    ifrm.style.color="red";
ifrm.style.zIndex= "101";
document.body.appendChild(ifrm);
}

function closeFrame(){
ifrm.style.display = "none";
}
</script>

<img src="http://www.business-standard.com/ads/inhouse/take2/tabel_two.jpg" onmouseover=makeFrame()  height="100px" width="100px" />

【讨论】：

【解决方案2】：

您可能需要指定框架的左侧和顶部，尝试添加：

ifrm.style.left="30px";
ifrm.style.top="30px";

【讨论】：