プルダウンメニューアイテムの画面優先順位

解決済

質問者：ategon
質問日時：2006/04/12 11:05
回答数：1件

画面上に<div>タグによるサブウインドウを表示して処理を行うようなページを製作しているのですが、<select></select>のプルダウンメニューだけはz-indexなどで指定した優先順位を無視して、常に最前面に表示されてしまいます（IE以外では未確認ですが・・・）。
このエレメントの優先順位を下げる方法はないのでしょうか。

最近A-JAXの発展でデスクトップと同等のインターフェースを備えたWebアプリケーションが増えているので、必ずこの問題にも解決法を見出しているはずだと考えているのですが・・・。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： noname#22259
回答日時：2006/04/12 12:49

//IE5+,NN6,Moz

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>???</title>
<style>
#fx{width:120px;height:150px;position:absolute;top:20;left:40;display:none;}
</style>
<script type="text/javascript">
function showMenu() {
document.getElementById('fx').style.display = 'inline';
}
function hideMenu() {
document.getElementById('fx').style.display = 'none';
}
</script>
<body>
<iframe id="fx" frameborder=0 scrolling=no marginwidth=0 marginheight=0 src="select.html"></iframe>
<input type=button value="Show Menu" onclick="showMenu()">
<input type=button value="Hide Menu" onclick="hideMenu()">
</body>
</html>

---[select.html]---
<form>
<select name="sel">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
</form>

この回答への補足

結局、<iframe>だとinnerHTMLで流し込めないので<div>タグのエレメントを引数に渡すとその下に同サイズの<iframe>を設置する関数を作ってみました。
ちなみにシムのサイズはcssで別途指定して合わせてます。

// シム（プルダウンが透ける問題対策）作成・表示
function SimView(elem){
//取得or作成
if(document.getElementById(elem.id+'Sim')){
Sim = document.getElementById(elem.id+'Sim');
} else {
//シム作成
var Sim = document.createElement('iframe');
Sim.id = elem.id+'Sim';
Sim.scrolling = 'no';
Sim.frameborder = '0';//なぜか消えない・・・
document.body.appendChild(Sim);
}
//シム表示（元エレメントのデータを参照）
Sim.style.left = elem.style.left;
Sim.style.top = elem.style.top ;
Sim.style.display = 'block';
}

補足日時：2006/04/12 17:31

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
ソースが無くても「iframeなら透過しない」の一言でも良かったのですが、ソースまで付けてくださって感謝します。

自分でも関連していそうなページを発見しました。
Weblogicの開発者向けのページらしく、cssで表示させたメニューの下にiframeのシム（と呼んでいるらしい）を置いてこの問題を解決するというものでした。

ただ、この手法は既存のロジックをそのまま使用すべき場合に有効であって、今回のように新規に作成しようとする場合、単純に<div>から<iframe>に置き換えても問題ないのかと思われますが、どうなのでしょうか。

通報する

お礼日時：2006/04/12 13:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！