中央揃えのページでレイヤーを使用する場合の最大の問題は、表示解像度を変更すると、中央揃えの他の要素に対するレイヤーの位置が変わることです。この記事では、レイヤーが他の中央に配置された要素に対して位置がずれないようにする方法を紹介します。
レイヤーの絶対位置と相対位置
レイヤーの絶対位置コード:
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"> </div>
レイヤーの相対位置コード:
<div id="Layer1" style="position:relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
中央揃えのページに、相対位置指定レイヤー コードを挿入すると、レイヤーの位置がページの中央になります。しかし、動かなくなり、使いにくくなりました。
絶対位置コードを挿入します。 left と top に正の値と負の値が含まれている場合、レイヤーを中央に配置することはできません。 left 属性と top 属性をクリアすると、レイヤーを中央に配置でき、ページ上の他の中央に配置された要素との位置ずれはなくなります。
描画レイヤーと挿入レイヤーの違い
描画レイヤーの使用:
中央揃えのページで、レイヤーをレンダリングするコード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
を使用します。
<html>
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ディビジョン</title>
</head>
<本文>
<div id="Layer1" style="position:absolute; left:40px; top:30px; width:265px; height:75px; z-index:1"></div>
<div align="center"></div>
</body>
</html>
挿入レイヤーを使用します。
中央揃えのページでは、挿入レイヤー コード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
を使用します。
<html>
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div2</title>
</head>
<本文>
<div align="center">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
</div>
</body>
</html>
「描画レイヤー」を使用して生成されたコードは中央揃えコードには含まれないため、レイヤーが中央揃えのページ内の他の要素に対して位置ずれしないようにするには、挿入レイヤーを使用する必要があります。
中央揃えのページでは、他の中央揃えの要素に対してレイヤーの位置がずれないようにするために、通常 2 つの方法が使用されます。
挿入レイヤーの使用
1. 中央揃えのページで、文書内に挿入ポイントを配置します。この例では、表内に挿入ポイントを配置します。
2. 「挿入」/「レイヤー」メニューを選択します。
3.ドキュメントにレイヤーが挿入されます。この例では、レイヤーがテーブルに挿入されます。 IE ブラウザでテストして解像度を変更すると、レイヤーのコンテンツは他の中央に配置された要素に対して位置がずれることはありません。
プロパティ パネルでこのレイヤーのプロパティを確認します。この挿入されたレイヤーにより、「左」と「上」の値がクリアされます。
この方法は、ポップアップ メニューを作成するためによく使用されます。
ネストされたレイヤーの使用
ネストされたレイヤーは、コードが別のレイヤー内に含まれるレイヤーです。
ネストされたレイヤーを使用する前に、まずレイヤーのパラメーターをいくつか設定する必要があります。 「編集」/「環境設定」メニューを選択し、「環境設定」ダイアログボックスで「Netscape 4 互換性: レイヤー挿入時のサイズを固定」を選択すると、作成されたネストされたレイヤーが Netscape 4 ブラウザーと互換性を持つようになります。そして「ネスト: レイヤー内の場合はネストを使用する」にチェックを入れます。
[レイヤー]パネルを開き、[オーバーラップを防止]のチェックを外します。
ネストされたレイヤー:
ページの中央に表を挿入し、表にレイヤーを挿入します。このレイヤーは表に対して位置がずれることはありません。このレイヤーでは、「挿入」/「レイヤー」コマンドを使用してサブレイヤー (ネストされたレイヤー) を挿入します。ページ上でこのサブレイヤーをどのように移動しても、その位置は中央に配置された他の要素に対して移動されません。
挿入されたレイヤーには、複数のネストされたレイヤーを挿入し、ネストされたレイヤーを必要な場所に移動して、中央のページで自由にレイヤーを使用できます。
結論: ページを中央に配置し、ポップアップ メニューを作成し、[挿入/レイヤー] コマンドを使用し、レイヤー レイアウトを使用してコンテンツをレイヤーに配置し、ネストされたレイヤーを使用します。