ページレイアウトを構築する場合、さまざまな方法があります使用することができます。特定のページレイアウトの要件に依存する、使用方法、異なる状況下で、他のいくつかの方法があまりにもより良い方法かもしれません。
例えば、フローティング要素の数は、クリーンでシンプルなページレイアウトを構築するために使用することができます。それとも、あなたがより複雑なレイアウトの要件が必要な場合は、王朝は、そのような相対的および絶対位置の使用など他の方法を使用することができます。
この記事では、我々は最初の要素が浮遊について説明し、次に、我々は、x、yおよび制御要素のz軸位置を使用する方法を説明します。
要素を浮動
ページレイアウトを構築する際に、使用浮動要素は、要素の位置を制御するための直感的な方法です。要素は他の要素から近くまたは離れ浮動要素を作ることができます。これは、サイズとコンテナ要素のサイズに応じて、親ノードの他の要素とレイアウト内の要素間の関係を構築することです。
要素が浮いている場合は、この要素は次の前者の要素である、あるいは新しい行に表示されますか？それは、その隣人の位置に依存します。
もちろん、浮動要素が強い力を提供しながら、それはまた、多くの問題をもたらします。よく知られた問題は、親ノードがフローティングサブ要素の数を含んでいる場合には、親ノードのレイアウトが考慮にサイズや浮動サブ要素の位置を取るだろうが、親ノードの子要素のサイズに影響を与えないことです。この場合には、親ノードの高さは0になり、他の特性を無視します。多くの場合、問題は、親も正確にランク付けされるように見えるCSSスタイルとネストされた要素の任意の組み合わせに接続されていない場合は特に、注目されていません。
適切にネストされた要素を整合していない場合は、レイアウト上のエラーにつながる可能性があります。次の例を参照してください、クラスDIVコンテナという名前■はセットはライトグレーの背景を持っている必要がありますが、その要素は、要素を浮動ネストされているの、それが持っていたので、希望の背景色は表示されません。あなたはボックスモデル■は設定が表示された場合、あなたはそれが高さが0であるのです見つけることができます。
■は集合{
背景：＃e8eae9。
}
■は{
背景：＃8ec63f。
高さ：100pxに。
フロート：左;
マージン：10pxの;
幅：200pxの。
}
一つの解決策は、親コンテナのラベルの前に閉じられ、空の要素を追加することで、明確に設定します：両方。この動きは、ほとんどのケースを解決することができますが、それは「正しいセマンティック」ではない「クリア浮かびます」。あなたはフロートをクリアしたいページ数の増加に伴い、空のノードの数が増加している必要があるが、これらの空のノードは、任意のHTMLセマンティクスを持っていません。
幸いなことに、同じを使用する他のいくつかのヒントがありますが、最も有名なのは、オーバーフローとclearfixスキルを使用することです。
オーバーフロー使用
親コンテナのオーバーフロー上に配置された：灰色の背景が表示されるこの実施例では、実際の高さ値を有するように、自動、自動的に、子要素を含むことができます。
高さは、このトリックIE6またはwidth属性を使用している場合、コンテナ内の親ノードに設定する必要があります。実際の高さは、多くの場合、可変であるため、幅の値が提供されます。アップルのプラットフォーム上でIEの場合は、オーバーフローを設定：隠された：それはオーバーフローを設定するのが最適ですので、自動、コンテナにスクロールバーが増加します。
SET {-.boxの
背景：＃404 853;
オーバーフロー：自動;
}
これは、いくつかの副作用を移動します。例えば、増加または親コンテナの範囲を超えて移動スタイルのサブ要素は、そのような暗い国境やプラスドロップダウンメニューを達成するためにする必要があります。第2のサブ要素は問題が配置されている親の範囲外暗い境界が、容器を被覆するときは、次の例では、その表示されます。
clearfixを使用し
て通常clearfixを：擬似要素が使用後：前か。擬似要素は、親血管はフローティング要素を含むの前または後ろに隠された要素を作成するために使用されます。これにより、上マージンの子要素を防止し、匿名のテーブルセル要素テーブルを作成するには消える：スルー：使用ディスプレイ擬似要素の前に。この動きは、IE6と7で同じ効果があります。同様に、提供することによって：擬似要素の後にサブ要素が消えるの下マージンを防止します。
IE6と一貫性の7を解決するために加えて、親コンテナのプロパティを使用する必要は*ズームトリガーhasLayoutメカニズム。hasLayoutのレンダリングされ、その内容を額装すべきかの要素を決定するメカニズム、および要素間の位置関係。
以下clearfixを使用する場合は、あなたもまた、表示されることがあり、親コンテナ要素を超えて表示されます。（暗い境界注）
■はセット：前、
■はセット：{後に
内容：「」。
ディスプレイ：テーブル。
}
■は設定：{後に
クリア：両方。
}
■はセット{
*ズーム：1。
}
効果的に浮動要素含まれてい
ますが、使用する技術があなたの個人的な習慣に依存します。一部の人々は理由は、クロスブラウザで一貫性良く、clearfixのスキルを使用することを好みます。その他はclearfixはより多くのコードが必要だと思います。したがって、技術の選択は重要ではありませんが、コメントと書かれた文書を注意することが重要です。
一般的な実装は、コンテナが容易な経営スタイルのための統一されたクラス名の浮いた要素を含んでいる必要があるすべての親を与えることです。例えば、親ノードに加えて、フローティング要素グループ・クラス名が含まれている必要があり、次のコードを、使用。
.group：前、
.group：{後に
内容： ""。
ディスプレイ：テーブル。
}
.group：後{
クリア：両方。
}
.group {
*ズーム：1。
}
位置属性
いくつかのケースでは、あなたは、要素の位置、あなたはpositionプロパティを使用する必要があります。この時間をより細かく制御する必要があります。5つの別のpositionプロパティの値があります。
静止位置
これは、positionプロパティのデフォルト値ですが、それはこの要素は要素オフセット性の任意の位置を受け入れることではないことを意味するものではありません。
次の例では、すべてのボックスは、一つ一つ積み上げています。彼らは、ブロックレベル要素であり、浮動されていないため。
■は集合{
背景：＃e8eae9。
}
■は{
背景：＃8ec63f。
高さ：80px;
幅：80px;
}
相対位置
の相対位置が非常に静的なポジショニングで満たされています。、上、右、下左：最大の違いは、相対的な位置決め要素がオフセットを使用することができるということです 。このオフセットは、位置の正確な制御が示すように、四つの要素は、任意の方向に移動可能となります。
要素の相対位置をオフセット性を使用することができるが、それはページ内のレイアウトに応じてあることに注意する静止位置と同様に（これは固定された位置と絶対位置と異なっている）です。さらに、相対位置決め要素は、他の要素をカバーすることができる、またはそれ自体がシフトしないが、他の要素は、被覆されています。
次の例では、すべてのボックスは、一つ一つ積み上げています。彼らそれぞれが元の位置に相対的なオフセットに従って定義されているが変更されました。だから、他のいくつかのボックスではなく、他のボックスをプッシュするよりも、ボックスをカバーしました。要素が（たとえそれがオフセットた）相対位置である場合、公開基準時のその周囲の要素は元の位置（NOがオフセットされている指の位置）その要素がまだあります。
■は集合{
背景：＃e8eae9。
}
■は{
背景：＃8ec63f。
高さ：80px;
位置：相対;
幅：80px;
}
■は1 {
トップ：20ピクセル。
}
■は2 {
左：40ピクセル。
}
■は3 {
底：-10px。
右：20ピクセル;
}
宣言された値、最優先の高い値の上下両方の場合。宣言された値の左と右の両方の場合には、優先順位は（たとえば、英語、フランス語、ドイツ語、スペイン語など）の言語ページに依存します。例えば、英語でのページは、高い優先度が残され、アラビア語のページで、優先度の高い右。
位置絶対
素子オフセットを受信する絶対位置。レイアウトでは、絶対原位置から位置決め要素は（その背後にある要素は、その現在の位置を占有する）、位置決定とその親ノードの相対的な位置決めを消去します。それは、親ノードの反対側に配置されていない場合、容器本体を直接要素を参照して位置決めされます。
要素の絶対位置プロパティを使用してオフセット、この要素は、オフセット参照フレームとして親ノードの反対側に配置されます。
いかなるオフセットは、要素の絶対位置特性でない場合、要素は、親ノードの左上隅に配置されます。依然として左端の親ノードに依存しながら、唯一トップ属性場合、要素は、垂直方向にのみ、水平方向にオフセットされています。
以下の実施例では、ボックスのすべては、親コンテナの絶対位置に関して行わ。オフセットが正の場合には、ボックスには、「押し込み」であり、オフセットが負の場合、ボックスは「プル」です。
■は集合{
背景：＃e8eae9。
高さ：200pxの。
位置：相対;
}
■は{
背景：＃8ec63f。
高さ：80px;
位置：絶対;
幅：80px;
}
■は1 {
トップ：6％。
左：2％。
}
■は2 {
トップ：0。
右：-40px;
}
■は3 {
底：-10px。
右：20ピクセル;
}
■は4 {
底：0。
}
絶対配置要素が一定の高さと幅の値を持っている場合は、次の
場合に宣言された値の上下両最優先の値が高いです。宣言された値の左と右の両方の場合には、優先順位は（たとえば、英語、フランス語、ドイツ語、スペイン語など）の言語ページに依存します。例えば、英語でのページは、高い優先度が残され、アラビア語のページで、優先度の高い右。
もし絶対配置要素のない一定の高さまたは幅値：
要素が高さの値を固定し、それらは、トップとボトムの値を持っていない場合、その要素は、すべての残りの高さの頂部および底部を横切ってに加えて、あろう。要素が固定値幅ではなく、同時に左右の値を有する場合、同様に、その要素に加えて、残りのすべての左右幅に及ぶであろう。どちらの要素は、高さと幅の値を固定するだけでなく、上、下、左、右の価値を持っている場合は、その要素は、距離の四辺に加えて、すべてのスペースを占有します。
位置修正
絶対位置決め要素と要素の固定位置が基準システムブラウザビューポート（ビューポート）の座標であることを除いて、同様です。ページスクロールで移動しない要素の位置を固定し、その位置のままになります。また、IE6に解決するために、いくつかのハックを使用する必要があり、BUGの位置決め固定。
典型的な例では、固定配置上部または下部レールバーページの使用です。ユーザーがページをスクロールすると、バーは常にブラウザのビューポートの上部または下部にとどまります。
フッタ{
底：0。
左：0;
位置：固定;
右：0;
}
Z-index属性の
ページは、二次元空間、x軸とy軸に応じて各表示素子です。あなたが他の要素の上に配置要素が作成する必要がある場合は、（デフォルトのレイアウトで利用可能な、彼女は彼の上記ではなかった）、その後、あなたは、zインデックスを変更することができ、彼女の属性なので、彼女は彼に行ってきました上記。
要素は、z軸位置でDOMに表示される順序に依存します。二つの要素が発生重複する場合、DOMエレメントの下の行に発生する最初の要素は、一般的に後に起こります。Z-index属性を変更すると、最初の要素が、彼は上記の多くを表示させるための簡単な方法で表示されます。DOMツリーにかかわらず、その位置の、最高のzインデックス要素は常にトップにランクされたと属性。
あなたは要素のzインデックス属性を設定する必要がある場合は、最初に、この要素は、相対的な絶対的または固定位置で設定する必要があります。ただ、セットの上、下、左、右のプロパティに好きです。
■は集合{
背景：＃e8eae9。
高さ：160ピクセル;
位置：相対;
}
■は{
背景：＃8ec63f。
ボーダー：3px固体＃1 f7941d。
位置：絶対;
}
■は1 {
左：10pxの。
トップ：10pxの;
}
■は2 {
底：10pxの。
左：70ピクセル;
z屈折率：3。
}
■は3 {
左：130px;
トップ：10pxの;
Zインデックス：2。
}
■は4 {
底：10pxの。
左：190px;
Zインデックス：1。
}
