Q&A
回答ありがとうございます。
iframeで呼び出される側のmarginが影響するとは思いもよりませんでした。
勉強になりました。
z-indexだとうまくいきました。htmlが少々複雑になりますがこれもありですね。
理解不足によるものと承知でタイトルにしましたが、本当に理解に苦しんでいます。
0. iframeのサイズをsytleで指定してもサイズが小さく表示される
0. iframeに被せるようにdivを配置してもiframeの方が上に表示される
0. iframeに被せたdivにopacityを1未満で指定すると上に表示される
Mac safari,chrome,opera にて動作を確認しました
firefoxは「1.サイズが小さく表示される」は発生しませんでした
index.html
html
1<!DOCTYPE html> 2<html> 3<head> 4 <style> 5 body {padding:0;margin:0} 6 .overpanel { 7 background-color: pink; 8 border: 1px solid red; 9 box-sizing: border-box; 10 width: 600px; 11 height: 200px; 12 margin: auto; 13 margin-top : -200px; 14 } 15 .frame { 16 width: 600px; 17 height: 200px; 18 display: block; 19 margin: auto; 20 float: none; 21 } 22 .contents { 23 border: 20px solid skyblue; 24 box-sizing: border-box; 25 background-color: lightgreen; 26 width: 600px; 27 height: 200px; 28 margin: auto; 29 } 30 </style> 31</head> 32<body> 33<div style="height:50px;"></div> 34<!-- --> 35<iframe class="frame" src="iframe-content.html" marginheight="0" frameborder="0" scrolling="yes"></iframe> 36<div class="overpanel"></div> 37<!-- --> 38<div class="contents"></div> 39<div class="overpanel"></div> 40 41</body> 42</html>
iframe-content.html
html
1<html> 2<head> 3 <style> 4 .contents { 5 border: 20px solid skyblue; 6 box-sizing: border-box; 7 background-color: lightgreen; 8 width: 100%; 9 height:500px; 10 } 11 </style> 12</head> 13<body> 14 <div class="contents"></div> 15</body> 16</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だと下になります。
とても不可解な挙動に思えます。
１番の目的は「iframeの上にdivを重ねる」ということなのですが、サイズが小さくなることもデザイン上困っています。
原因と対策をご存知でしたら教えていただけるとうれしいです。
よろしくお願いします。
回答2件
0
ベストアンサー
iframeのサイズをsytleで指定してもサイズが小さく表示される
iframe-content.html で body { margin: 0; } にしてください。
iframeに被せるようにdivを配置してもiframeの方が上に表示される
iframeに限らずimgやただのテキストでも、divが後ろに表示されます。試してみてください。
また、<div class="overpanel">ほげほげ</div> のように文字を書くと、それはiframeの前に表示されます。試してみてください。
つまり、
- 奥から順に .overpanelの背景 → iframe/img → .overpanelのテキスト
ということになります。
なぜこのようになるか、仕様書で事細かに決まっています。
次のリストが、ページの描画順番です。数字が大きいほど後に描画されます（つまり、最前面に来ます）。
9 Visual formatting model
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow, non-inline-level, non-positioned descendants.
- the non-positioned floats.
- the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- the child stacking contexts with positive stack levels (least positive first).
英語でわかりにくいかと思いますが、ざっくりいうと、
- スタックコンテキスト（今回は<html>のみ）の背景とボーダー
- スタックレベルが負である子スタックコンテキストとその子孫
- インラインレベル以外の要素（ただし2, 6, 7は除外）
- フロートしている要素（ただし2, 6, 7は除外）
- インラインレベルの要素（ただし2, 6, 7は除外）
- スタックレベルが0である子スタックコンテキストとその子孫、あるいはポジショニングされている要素
- スタックレベルが正である子スタックコンテキストとその子孫
です。これに今回のHTMLを当てはめると、
- （該当なし）
- （該当なし）
- .overpanelの背景（ただし、.overpanelの中身のインラインレベルのものは描画されない）
- （該当なし）
- iframe、img、テキストなど（.overpanelの中身のものも含む）
- （該当なし）
- （該当なし）
同じ数字に分類されているものは、HTMLの順番に描画されます。
（iframe がインラインレベルの要素に分類されています。たしかに display: block; が指定されていますが、iframeは置換インライン要素なので本体部分はインライン要素と見なされるためです。）
ここから分かる通り、
- 奥から順に .overpanelの背景 → iframe/img → .overpanelのテキスト
のように描画される訳です。
「iframeの優先度が強い」というよりかは、**「.overpanelの背景色の優先度が低い」**のです。
上の解説は細かなことまで書いており分かりにくくなりましたが、要するに一般的なHTMLでは、下の順で描画されます。
- ブロックレベル要素の背景色（ソース順）
- 他のすべてのインラインレベル要素とテキスト（ソース順）
iframeに被せたdivにopacityを1未満で指定すると上に表示される
先程のリストで 「スタックコンテキスト」 という聞きなれない単語が出てきたかと思います。
実は、opacityを1未満で指定すると、その要素がスタックコンテキストになる のです。
MDN スタック文脈
1 未満の opacity 値を持つ要素
この場合、先程の描画順のリストはこうなります。
- （該当なし）
- （該当なし）
- （該当なし）
- （該当なし）
- iframe、img、テキストなど
- .overpanel
- （該当なし）
ゆえに、opacity:0.99 を指定するとiframeの上に表示されるのです。
なぜこういう挙動になっているかというと、透過処理の複雑化を避けるためです。
ある要素が スタックコンテキスト になると、背景色とインライン要素の描画順が分離することがなくなります。
つまり、その要素の子孫要素すべてを描画してから、全体の透過を一気にできるのです。
対策
.overpanel が描画順の5, 6, 7に来てくれれば、iframeの上に描画されることがわかりました。
ですので、一番簡素な方法は、
css
1.overpanel { 2 position: relative; 3}
として、.overpanelの描画順を6にすることです。
投稿2017/03/14 16:14
編集2017/03/14 16:26
総合スコア368
0
iframe-content.html のほうに
body { margin: 0px; padding: 0px; }
を追加してみて。
重ね表示の順番はz-indexっていうCSSがありますよ。
投稿2017/03/14 15:45
総合スコア162
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/03/14 16:47