Ktouth Brand. on Web

«学園黙示録 HIGHSCHOOL OF THE DEAD(.. 最新フルアレンジバージョン»

[2007年04月01日]

IEのz-indexの扱い

タグ: つれづれ日記、AJAX

2011年01月26日 18:27更新 筆者:K.Ktouth

自分メモ。

Ext UIには便利なコンポーネントがたくさんあるが、Ext.LayoutDialogクラスをIEで利用するときには注意が必要である。
Ext.LayoutDialogの生成時に渡すmodalパラメータでモーダルダイアログが作成できるが、作成する場所によっては上手くモーダル表示できない。

Ext.LayoutDialogクラスはモーダル表示を、documentノードの末尾に表示を全部覆えるほどの大きな半透明のレイヤーを生成し、ダイアログレイヤーの背面に配置することで実現している。
この際の配置の前後関係はCSSのz-indexプロパティを利用している。
が、IEでダイアログを生成したレイヤーにposition:relative属性が設定されている場合、マスクレイヤーの下にダイアログが表示されて操作ができなくなる。
Firefoxでは問題なく表示される。

position:(relative|absolute)指定されたレイヤーはz-indexで配置の前後関係を変えられる。
おそらくだが、Firefoxではレイヤーは一元管理され、そのz-indexは全レイヤー共通の基準で独立している。対してIEではレイヤーは上位レイヤーの中で管理され、z-indexは上位レイヤーの外には影響しない。
そのため、レイヤーの外にある別のレイヤーは、そのレイヤーの中の前後関係に干渉することができない……模様。

解決(回避)方法は、ダイアログは元々ウィンドウ中央に表示されるのがデフォルトなので、作成する場所もrelative指定の外、つまりdocumentレイヤーに配置しておけば問題ない。

コメント(1) [コメントを投稿する]

_ もも2011年01月26日 18:27

永きに渡る謎が今解けました。分かりやすい説明ありがとうございます。

コメントを投稿してください。E-mailアドレスは公開されません。

[TrackBack URL: http://www.k-brand.gr.jp/tb.rb/20000811]

本日のリンク元

EzWeb検索 ×38 : 9, 5, 3, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
Mixi ×7 : 5, 1, 1
YGブログ検索 ×5 : 4, 1
入れ替わりマニアックス ×2
Arcadia 掲示板/tokimemo ×2
HOTな絵検索(らき☆すた/らき☆すた画像掲示板) ×1
From Chaos To Ouroboros ×1

アンテナ

その他のリンク元

検索

ie z-index ×49 / IE z-index ×47 / sleipnil ×36 / z-index ie ×22 / z-index IE ×14 / キングダムハーツ１裏技 ×10 / 花より男子二次小説大人 ×8 / キーワード不明 ×7 / 学園ヘブン完全攻略 ×7 / 少女裸 ×6 / ie レイヤー ×6 / BLEACH 裸画像 ×5 / グラドリエル ×5 / ときめきメモリアル裏技携帯 ×5 / とらぶる裸画像 ×5 / 完全攻略5攻略 ×5 / ie firefox z-index ×4 / Sleipnil ×4 / とらぶる裸画像 ×4 / 笠間良子 ×4 / IE6レイヤー設定 ×4 / 触手フラッシュ ×4 / 少女セクト感想 ×4 / 逆転裁判２ｈｃ ×4 / エヴァンゲリオン裸 ×4 / Ext.LayoutDialog ×4 / ときめきメモリアル DS 完全攻略法 ×3 / ときめきメモリアルガールズサイド２ DS 攻略法 ×3 / IE Zindex ×3 / うたわれ二次小説 ×3 / ときめきメモリアルガールズサイド２ DS 攻略 ×3 / ニュースーパーマリオブラザーズの裏技 ×3 / ときめきメモリアルガールズサイド2 攻略 ×3 / 桜井麻由 ×3 / 逆転裁判２ｈc ×3 / ときメモガールズサイド２完全攻略法 ×3 / ときメモガールズサイド2 ＤＳ攻略法 ×3 / うたわれるものＳＳ ×3 / キングダムハーツ1裏技 ×3 / relative z-index IE ×3 / ie モーダル表示 ×3 / ときめきメモリアルガールズサイド２攻略 ×3 / .hack//G.U. 小説 ×3 / ゼロの使い魔ｓｓ ×2 / Internet Explorer z-index relative ×2 / 完全攻略5 攻略サイト ×2 / DS ときめきメモリアル攻略法 ×2 / relative IE6 z-index ×2 / z-index IE Firefox ×2 / DS逆転裁判2攻略 ×2 / のだめカンタービレ２次小説 ×2 / ジャンプとらぶる裸画像 ×2 / IE6 z-index ×2 / wii 051330 ×2 / Z-Index IE 回避ほうほう ×2 / BLEACH 夢小説裏 ×2 / ゼロの fate ss ×2 / ときメモガールズサイド2 攻略 ×2 / グラドリエル触手 ×2 / DS逆転裁判２攻略 ×2 / レイヤー zindex ×2 / zindex ie ×2 / ie z-index absolute ×2 / ＤＳときめきメモリアルガールズサイド１ｓｔ攻略法 ×2 / LayoutDialog z-index ×2 / ときメモガールズ ds攻略 ×2 / 裏夢小説触手 ×2 / TO LOVEるとらぶる裸 ×2 / 少女裸画像 ×2 / z-index ie 表示できない ×2 / ie6 zindex ダイアログ ×2 / "IE" "relative" css z-index ×2 / H 夢小説触手 ×2 / IE フォームレイヤー ×2 / トマホークスピン攻略 ×2 / Zindex IE ×2 / 完全攻略法逆転裁判３ ×2 / モーダル表示 IE レイヤー ×2 / 二次創作 .hack//G.U. SS ×2 / ガールズサイド DS攻略 ×2 / d.gray-man 裏夢小説 ×2 / css z-index エラー ×2 / 「詩織 -四月-」SS ×2 / トキメキメモリアルガールズサイド2 攻略 ×2 / z-index position 干渉 ×2 / .hack//Ｇ．Ｕ二次創作小説 ×2 / to loveる裸画像 ×2 / うたわれるものらじお出張版赤ビキニ ×2 / リストレイヤー z-index IE ×2 / firefox zIndex ×2 / どうぶつの森６４裏技 ×2 / キングダムハーツ 1裏技 ×2 / 少女の裸画像 ×2 / To LOVEる裸画像 ×2 / LayoutDialog ×2 / C#2005 WEB Z-INDEX ×2 / モーダル zindex ×2 / javascript レイヤ IE7 ×2 / のだめSS ×2 / firefox z-index ×2

	2012年2月
29	30	31	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	1	2	3

IEのz-indexの扱い

コンテンツ

つれづれ日記

Programmer's Labo.

語り部の館

けぇぶら

Information

Amazon Associates

管理人一押し!

Amazon.co.jp 推薦
- Books -

Amazon.co.jp 推薦
- VideoGames -

Ktouth Brand. on Web

IEのz-indexの扱い

コンテンツ

つれづれ日記

Programmer's Labo.

語り部の館

けぇぶら

Information

Amazon Associates

管理人一押し!

Amazon.co.jp 推薦- Books -

Amazon.co.jp 推薦- VideoGames -

Amazon.co.jp 推薦
- Books -

Amazon.co.jp 推薦
- VideoGames -