質問: 理解不足によるものと承知でタイトルにしましたが、本当に理解に苦しんでいます。 1. iframeのサイズをsytleで指定してもサイズが小さく表示される 2. iframeに被せるようにdivを配置してもiframeの方が上に表示される 3. iframeに被せたdivにopacityを1未満で指定すると上に表示される *Mac safari,chrome,opera にて動作を確認しました* *firefoxは「1.サイズが小さく表示される」は発生しませんでした* ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/03db4b39ab7aa8a4b764aa65be7eaf62.png) index.html ``` ``` iframe-content.html ``` ``` **iframeのサイズをsytleで指定してもサイズが小さく表示される** iframeのサイズを幅600pxにしていますが、実際には584pxで表示されています。 styleではなくiframe要素widthで`width="600"`にしても結果は同じでした。 **iframeに被せるようにdivを配置してもiframeの方が上に表示される** iframeの次に配置したdivをマイナスマージンすることで上に重ねていいます。 通常、後から指定されたものが上に重なると理解しているのですが、そうなりません。 **iframeに被せたdivにopacityを1未満で指定すると上に表示される** なんらかの理由でiframeの優先度が強いのかと思ったのですが... `opacity:0.99`を指定すると上に表示されます。`opacity:1`だと下になります。 とても不可解な挙動に思えます。 1番の目的は「iframeの上にdivを重ねる」ということなのですが、サイズが小さくなることもデザイン上困っています。 原因と対策をご存知でしたら教えていただけるとうれしいです。 よろしくお願いします。
回答: iframe-content.html のほうに body { margin: 0px; padding: 0px; } を追加してみて。 重ね表示の順番はz-indexっていうCSSがありますよ。