css - 你可以 float ul 以显示在 iframe 的父页面顶部吗

Question

所以我有一个 CSS 菜单栏，它位于页面的 iframe 中。菜单工作正常，只有列表现在下降超过父页面上的 iframe 大小。 我正在寻找的是一种使下拉列表显示在其父页面内容上方的方法。

我试过使用 zindex 但不幸的是它仍然隐藏在框架中!

不确定这是否可行任何帮助都会很棒。

Answer 1

我能提供的最好的例子就是为什么这行不通。

iframe 是一个独立的单元，在它自己的 block 中呈现。 iframe 中位于 iframe block 外部的任何元素都将不可见。

在下面的示例中，我将粗体元素重新定位到左侧并留有负边距，您可以看到文本被 iframe 的边缘剪掉了。

您需要使用 jQuery AJAX 调用来获取源代码，获取感兴趣的元素，然后将其插入到父页面的 DOM 中。

iframe {
  margin-left: 50px;
}

<p>Outside of the iframe.</p>
<iframe seamless sandbox="allow-same-origin"
        srcdoc='<p>Yeah, you can see it 
        <a href="/gallery?mode=cover&amp;page=1">in my gallery</a>.
        <b style="position: absolute; top:0; left: -20px;">
          Some bold text.</b>'>
</iframe>