iframeの子供のZ-インデックスが希望通りに機能しない

私はiframeを持つウェブサイトを持っており、ウェブサイトには独自の背景/オーバーレイがあります。私の目標は、iframeの子要素のz-indexを設定することです。そのため、この子要素だけがオーバーレイの上にある必要があります。 iframe内のウェブサイトとトップのウェブサイトの両方にアクセスできます。iframeの子供のZ-インデックスが希望通りに機能しない

私は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>

それが可能だ場合、あなたのアイデアを持っていますか？どうやって？

出典

2017-08-22 user3287019

いいえ、それはできません。 iframeは独立したウィンドウインスタンスであり、z-indexはそのようなものを越えて機能しません。 – CBroe

あなたが望むことはできません。あなたが持っているもの

はこれです：

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

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

二つの文書が重複しないと、このような方法で互いに相互作用することはできません。要素をトップのz-インデックスに移動することができます。内にiframeを配置することはできますが、目的の方法でiframeの要素を「分割」することはできません。 iframe自体を一番上に設定する必要があります。

別の方法として、ajaxリクエストを使用し、bodyに新しい要素を追加し、その上に表示するスタイルを使用することができます。

出典

2017-08-22 11:10:31 Tschallacka

iframeの子供のZ-インデックスが希望通りに機能しない

答えて

関連する問題