如何让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

换个方法吧……在父元素页面写模态框，然后在子界面调用

为什么要用iframe。。。
不过我有个思路，就是第一个的a.html的容器的z-index在最外层的遮罩之上，然后a.html里面设置覆盖的遮罩,注意和外边的遮罩透明度和颜色一致，然后b.html的容器的z-index更大就好了

【热门文章】