Question

我想要做的是让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>

Answer 1

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

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

Answer 2

这是你的工作演示

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" />

如何使iframe位置高于其余部分

2 个答案: