HTML ページをデザインする過程では、フォーム要素がスタイル要素を覆うことによって引き起こされる問題がよく発生します。図 1 はその典型的な例です。この一見「低レベル」の問題を過小評価しないでください。同様の問題は、一部の大規模 Web サイトでも珍しくありません。この記事では、この問題の根本原因を調査し、解決策を提案します。私が恒久的な解決策ではなく救済策と言ったのは、Microsoft と NetScape という 2 つの巨人がまだ対抗策を持っていないからです。
1. HTML要素の表示優先度
HTML で一般的に使用されるフォーム要素には、テキストエリア (TEXTAREA)、リストボックス (SELECT)、テキスト入力ボックス (INPUT type=text)、パスワード入力ボックス (INPUT type=password)、ラジオ入力ボックス (INPUT type=radio) が含まれます。入力ボックスにチェックを入れます（INPUT type=checkbox）など。一般的な非フォーム要素には、リンク タグ (A)、DIV タグ、SPAN タグ、TABLE タグなどが含まれます。フォーム要素がスタイル要素をオーバーライドする根本的な理由は、HTML 要素のデフォルトの表示優先順位ルールにあります。たとえば、フレーム要素は常に他の HTML 要素よりも優先されるため、フォーム要素は常に先頭に表示されます。フォーム要素。
これらすべての HTML 要素は、表示要件に応じて、ウィンドウ付き要素とウィンドウなし要素という 2 つのカテゴリに分類できます。ウィンドウ要素には、SELECT 要素、OBJECT 要素、プラグイン、IE 5.01 以前のバージョンの IFRAME 要素が含まれます。ウィンドウレス要素には、リンクや TABLE タグなどのほとんどの通常の HTML 要素、SELECT 要素を除くほとんどのフォーム要素、NS6+/IE 5.5 以降の IFRAME 要素が含まれます。この記事で説明する問題は、主にウィンドウ付き HTML 要素に関連しています。問題の核心は、オペレーティング システムがデフォルトで常にウィンドウ付き要素をウィンドウなし要素の前に表示することです。
2. ブラウザの種類と表示優先度
ブラウザの種類に応じて、HTML 要素の表示順序も異なります。まとめると次のようになります。
⑴ネットスケープ/モジラ
NS Browser 6.0 より前のバージョンでは、フォーム要素は常に他の HTML 要素よりも高い優先順位を持っていました。ただし、NS 6 以降のブラウザでは、IFRAME 要素とすべてのフォーム要素の表示順序は、CSS の z-index 属性の値、または SELECT を除き、HTML ページに表示される順序によって決まります。要素。
⑵インターネットエクスプローラー
最新の IE ブラウザ (6.0) では、SELECT 要素を除く、IFRAME 要素とすべてのフォーム要素は、z-index 属性値または HTML ページ内に表示される順序に基づいて表示優先度を決定します。
⑶ オペラ
最新の Opera (7.10*) ブラウザでは、SELECT を含むすべてのフォーム要素は、z-index 属性または HTML ページ内での出現順序に基づいて表示の優先順位が付けられます。ただし、最新の Opera ブラウザでは、IFRAME はウィンドウなし要素として表示されず、表示順序ではすべてのウィンドウなし要素よりも優先されます。
3. CSS z-index 属性
CSS の z-index 属性を使用して、HTML 要素の表示時のオーバーレイ順序を制御できることがわかっています。複数の HTML 要素が同じ空間内で重なる場合、z-index 値が大きい要素が z-index 値が小さい要素を上書きします。
ただし、z-index 属性値は全能ではありません。前述したように、ウィンドウ付き要素は常にウィンドウなし要素の前に表示され、z-index 属性値は同じタイプの要素間でのみ決定的な役割を果たします。比喩的に言えば、ウィンドウ要素とウィンドウなし要素は、同じブラウザ ウィンドウ内の 2 つの異なるキャンバスに描画するようなものであり、これら 2 種類の要素は自己完結型であり、それらの z-index 属性は同じキャンバス上の他の要素に対してのみ相対的です。けり込む。
4. 救済策
現在のブラウザに関する限り、より効果的な解決策は、ウィンドウのない要素をウィンドウ要素で覆う必要がある場合、スクリプトを使用してウィンドウ要素を動的に非表示にすることです。完全な例を次に示します。
<html><ヘッド>
<スタイルタイプ=テキスト/css>
.menuBlock{position:relative;top:14px;width:165px;border:2px ソリッドブラック;}
#subMenus{位置:相対;左:15px;上:15px;幅:171px;
パディング左: 2 ピクセル;パディング右: 2 ピクセル;ボーダー: 2 ピクセル黒一色;
z-index:100;visibility:hidden;}
#lb_1{位置:絶対;左:10ピクセル;上:40ピクセル}
</スタイル>
<script type=text/javascript>
var isActive = false;
関数 showMenu(){
isActive = true;
//document.getElementById(lb_1).style.visibility=hidden;
document.getElementById(subMenus).style.visibility=visible;
}
関数 HideMenu(){
isActive = false;
setTimeout('隠す()',100);
}
関数非表示(){
if(!isActive){
document.getElementById(subMenus).style.visibility = hidden;
document.getElementById(lb_1).style.visibility=visible;
}
}
関数 setStyle(menuItem){
isActive = true;
menuItem.style.backgroundColor = グレー;
menuItem.style.color = #FFFFFF
}
関数 setDefault(menuItem){
isActive = false;
menuItem.style.backgroundColor = ;
menuItem.style.color =
隠すメニュー();
}
</script></head><body>
<div id=main style=position:absolute;width:200px;>
<div id=menuBlock class=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>CSS メニュー</div>
<div id=subMenus>
<div id=0 onmouseover=setStyle(this)
onmouseout=setDefault(this) >メニュー項目 1</div>
<!--合計 4 つのメニュー項目-->
</div><P>
<select id=lb_1 name=lb_1>
<option value=-1/>リストの選択
<!--3 つのオプション-->
</選択>
</div>
</body></html>
ページの <STYLE> 部分では、メニュー バー、メニュー項目、および選択リストにそれぞれ使用される 3 つのスタイルを定義します。このスタイル定義により、メニューと選択リストの表示領域が確実に重なり合います。 <BODY> セクションには、メニューと <SELECT> 選択リストの定義が含まれています。マウスがメニュー バーの上を通過すると、JavaScript 関数 showMenu が実行され、メニューが表示され、SELECT 選択リストが非表示になります。マウスが離れた後、hideMnu 関数はメニューを非表示にし、選択リストを復元します。残りの JavaScript 関数は主に、メニュー項目の上をマウスが通過するとメニューが高輝度で表示され (setStyle 関数)、マウスがメニュー項目から離れるとデフォルトの表示モードに戻ります。 (setDefault関数)。このページの実行効果を図 2 に示します。 showMenu 関数の document.getElementById(lb_1).style.visibility=hidden ステートメントをコメント アウトして、図 1 の効果を確認します。
<説明>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</説明>
つまり、フォーム要素がスタイル要素をオーバーライドする根本原因は、HTML 要素のデフォルトの表示優先順位ルールにあります。この記事で紹介した対処法は確かに有効ですが、どうしてもこの方法を使いたくない場合は、フォーム要素とスタイル要素の表示領域が重ならないようにページレイアウトを変更することを検討する必要があります。