プロが教える店舗＆オフィスのセキュリティ対策術

かなり困っています。知恵を貸してください

解決済

  • 質問者：kosa
  • 質問日時：
  • 回答数：6件

レイヤーを表示した時に、下にあるフォームの部品である「select」のメニューボックスがレイヤーの上に表示されてしまいます。
本来は、下に隠れて見えないはずなのに・・・

なんとかして回避したいのです。IE6.0だけでも回避する方法はありますか？

通報する

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

質問の本文を隠す

A 回答 (6件)

No.5ベストアンサー

表示したいレイヤーと、フォームの間に<iframe>を入れて、


<iframe>のサイズと位置をレイヤーのそれと同じにしてやることで、レイヤーが上に来ます。

#Layer1, #lay_bg{
position:absolute;
left:34px;
top:120px;
width:125px;
height:131px;
}
#Layer1{
z-Index:2;
background-color: #FF9900;
}
#lay_bg{
display: block;
z-Index:1;
}

<body>
<div id="Layer1">ここがレイヤー部分</div>
<iframe id="lay_bg" style="position:absolute;display:block;"></iframe> <!-- 追加 -->
<select name="select">
<option>あああああああああああ</option>
</select>

もしIEだけに適用させるなら、
<!--[IF IE]><iframe id="lay_bg" style="略"></iframe><![ENDIF]-->
などで分岐させて下さい。

「IFRAME SHIM」などで検索すると出てくるかもです。
JavaScriptでレイヤーをドラッグ出来るようにしたりすると、最悪な面倒くささを楽しめます。

この回答への補足

教えて頂いた方法で出来ました！ありがとうございます。
元レイヤーは、Fireworksで作成したポップアップメニューのレイヤーだったのでJavaScriptとCSSを若干修正する必要はありましたが、実現できました。

補足日時：2006/08/11 13:10
通報する
    • good
    • 0
    • 件
通報する

No.6

selectを非表示にすればいいんじゃないですか・・



<script>
function hide1(){
document.getElementById("cover").style.top=-60;
}
function show1(){
document.getElementById("cover").style.top=0;
}
function hide2(){
document.forms[0].elements["sel"].style.visibility="hidden";
document.getElementById("cover").style.top=-60;
}
function show2(){
document.forms[0].elements["sel"].style.visibility="visible";
document.getElementById("cover").style.top=0;
}
</script>
<body>
<form>
<div style="width:200px;height:60px;background:black;">
<br>　
<select name="sel">
<option>あああああ</option>
<option>あああああ</option>
<option>あああああ</option>
</select>
<br>
</div>
<div id="cover" style="width:200px;height:60px;background:red;position:relative;top:0px;">
</div>
<br>
未対応→
<input type="button" value="隠す" onclick="hide1()"/>
<input type="button" value="戻す" onclick="show1()"/><br><br>
対応済→
<input type="button" value="隠す" onclick="hide2()"/>
<input type="button" value="戻す" onclick="show2()"/>
</form>
</body>


.

この回答への補足

ありがとうございます！
こんな方法もあったのですね。

補足日時：2006/08/11 13:14
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： partita
  • 回答日時：

z-index:-10;



どうでしょうか。
    • good
    • 0
    • 件
通報する

No.3

>IE6.0だけでも回避する方法はありますか？



ていうか、IEのバグだと思います・・
下記を参照下さい。

http://members.at.infoseek.co.jp/cssbug/detail/w …

この回答への補足

他のブラウザでは正常に表示されることからIE特有の仕様かな？と思っていましたがバグですか・・・
今さらレイアウト変更はできないので、何か回避策があればいいのですが・・・
ご存知ありませんか？

補足日時：2006/08/10 14:09
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： times3
  • 回答日時：

ソースを書き換えない限りブラウザでは対応できません

この回答への補足

それはわかっています。
ブラウザで改善したいのではありません。
ソースをどのように改善すればよいかを知りたいのです

補足日時：2006/08/10 13:58
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yambejp
  • 回答日時：

具体的なソースをおかきください

この回答への補足

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>TEST</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:34px;
top:120px;
width:125px;
height:131px;
z-index:1;
background-color: #FF9900;
}
-->
</style>
</head>

<body>
<div id="Layer1">ここがレイヤー部分</div><br>
<select name="select">
<option>あああああああああああ</option>
</select><br>
<input type="text" name="textfield"><br>
<input type="submit" name="Submit" value="送信">
<br><br><br><br><br><br>
<select name="select2">
<option>あああああああああああ</option>
</select><br>
<input type="text" name="textfield2"><br>
<input type="submit" name="Submit2" value="送信"><br>
</body>
</html>

補足日時：2006/08/10 13:57
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報