javascript - 如何让iframe 中的元素z-index 高于iframe父元素的z-index
本文介绍了javascript - 如何让iframe 中的元素z-index 高于iframe父元素的z-index的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.Model{ display:block;
position: absolute; /* 使用绝对定位或固定定位 */
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-color: #333;
opacity: 0.5; /* 背景半透明 */}
</style>
</head>
<body>
<div id="container">
<iframe id="f1" src="a.html">
</iframe>
<div class="Model"></div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div>
hello
</div>
<iframe id="f2" src="b.html">
</iframe>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.alert{position:absolute;height:15px;width:150px;top:10px;left:15px;background-color:red;z-index:10000;}
</style>
</head>
<body>
<div>
<button>alert</button>
</div>
<div class="alert"></div>
</body>
</html>
解决方案
我觉得这个是没有办法的，z-index只适用于同一个window，每个iframe都是一个独立的window
这篇关于javascript - 如何让iframe 中的元素z-index 高于iframe父元素的z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
