Question

我有一个带有iframe的网站，该网站有自己的背景/叠加层。我的目标是设置iframe的子元素的z-index，因此只有这个子元素应该位于覆盖的顶部。我可以访问iframe和顶级网站中的两个网站。

我在Plunkr中复制了它，所以我的目标是将绿框（模态）放到顶部。

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <iframe src="iframe.html" width="100%" height="500px" ></iframe>
   <div class="backdrop">
       Backdrop
   </div>
  </body>

你知道是否有可能吗？怎么样？

Answer 1

你不能做你想做的事。

你拥有的是：

document
   body
     iframe
       - see document(2)
     div[class="backdrop"]

document(2)
   body
     div[class="modal box"]

这两个文件不重叠，不能以这种方式相互交互。您可以将元素移动到iframe中的索引中，但是您无法使元素＆＃34;突破＆＃34;你希望实现的方式的iframe。您必须将iframe本身设置为顶部。

另一种方法可能是使用ajax请求，然后将新元素附加到正文，并将样式添加到顶部。

iframe子项的z-index无法按预期工作

1 个答案: