[元のアドレス]（http://blog.csdn.net/qq_18407565/article/details/70234834）cssレイアウトモデル-CSSボックスモデル、ボックスモデルタイプの基本概念を明確にし、Webページレイアウトの詳細な議論を行うことができますベーシックモデル。レイアウトモデルとボックスモデルは、CSSの最も基本的でコアな概念です。ただし、レイアウトモデルはボックスモデルに基づいており、CSSレイアウトスタイルやCSSレイアウトテンプレートとは異なります。レイアウトモデルが本質である場合、CSSレイアウトテンプレートは終わりであり、式の外部形式です。CSSには、英語の3つの基本的なレイアウトモデル、フローモデル、レイヤーモデル、フローティングモデルが含まれています。フロー、レイヤー、フロートです。Webページには、要素の3つのレイアウトモデルがあります。1。フローモデル（フロー）2。フローティングモデル（フロート）3。レイヤーモデル（レイヤー）———-フローモデル（フロー）最初にフローモデルについて説明します。 、flow（Flow）は、デフォルトのWebページレイアウトモードです。つまり、デフォルト状態のWebページのHTMLページ要素はすべて、フローモデルに従って分散されます。-流体レイアウトモデルの2つの機能1.デフォルトの状態では、ブロック要素の幅が100％であるため、ブロック要素は含まれている要素内で上から下に順番に垂直に伸びます。実際、ブロック要素は行の形で位置を占めます。たとえば、右側のコードエディタの3つのブロック要素タグ（div、h1、p）の幅は100％として表示されます。2.2。フローモデルでは、インライン要素は、含まれている要素内で左から右に水平に表示されます。（インライン要素は、ブロック要素が独自の線を支配するほど横暴ではありません）**フロートモデル（フロート）**ブロック要素が横暴である場合、それらはすべて独自の線上にあります。2つのブロック要素を並べて表示する場合はどうなりますか。側？心配しないでください。要素をfloatに設定することで、この願いを実現できます。デフォルトではどの要素も浮動できませんが、div、p、table、imgなどのCSSによって浮動として定義でき、その他の要素は浮動として定義できます。次のコードは、2つのdiv要素を1行に表示できます。**レイヤーモデル（レイヤー）**レイヤーレイアウトモデルとは何ですか？レイヤーレイアウトモデルは、画像ソフトウェアPhotoShopで非常に人気のあるレイヤー編集機能のようなもので、各レイヤーを正確に配置して操作できます。ただし、Webデザインの分野では、ページのサイズのアクティビティにより、レイヤーレイアウトが人気がありませんでした。ただし、Webページでローカルにレイヤーレイアウトを使用すると便利です。HTMLのレイヤーレイアウトについて学びましょう。画像ソフトウェアPhotoShopのレイヤーと同様に、WebページにHTML要素を正確に配置する方法は、各レイヤーを正確に配置できます。CSSは、レイヤーレイアウトモデルをサポートするための一連の配置プロパティを定義します。**レイヤーモデルには3つの形式があります。** 1。絶対配置（位置：絶対）2。相対配置（位置：相対）3。固定配置（位置：固定）以下は、3つの形式のレイヤーモデルの具体的な詳細です。 -* *レイヤーモデル-絶対位置**要素のレイヤーモデルで絶対位置を設定する場合は、position：absolute（絶対位置）を設定する必要があります。このステートメントの目的は、要素をからドラッグすることです。ドキュメントフロー、次に左右を使用するThe、top、およびbottom属性は、配置属性を持つ最も近い親を含むブロックに対して絶対的に配置されます。そのような包含ブロックがない場合、それはbody要素に関連します。つまり、ブラウザウィンドウに関連します。-**レイヤーモデル-相対位置**要素のレイヤーモデルで相対位置を設定する場合は、次の位置を設定する必要があります。相対（相対位置を表す）。これは、左、右、上、および下の属性を通る通常のドキュメントフロー内の要素のオフセット位置を決定します。相対配置のプロセスは、最初に静的（フロート）モードで要素を生成し（そして要素はレイヤーのようにフロートします）、次に前の位置に対して移動します。移動の方向と振幅は、左、右によって決定されます。 、top、およびbottom属性。、オフセットの前の位置は変更されません。-**レイヤーモデル-固定配置**固定：絶対配置タイプと同様の固定配置を表しますが、その相対移動座標はビュー（画面のWebページウィンドウ）自体です。ビュー自体は固定されているため、ブラウザウィンドウの画面位置を画面上で移動したり、ブラウザウィンドウの表示サイズを変更したりしない限り、ブラウザウィンドウのスクロールバーによって変化することはありません。したがって、固定位置要素は常に配置ブラウザウィンドウ内のビューの特定の位置は、background-attachment：fixed;属性と同じ機能を持つドキュメントフローの影響を受けません。次のコードは、ブラウザビューに対して100px右に、50px下に移動できます。また、スクロールバーをドラッグすると位置が固定されます。8RelativeとAbsoluteを組み合わせて使用します。友人はセクション12-6で絶対配置の方法を学びました：position：absoluteを使用して、ブラウザ（本体）に対する設定要素の配置を実現します。他の人と比較することができますか？要素の配置はどうですか？もちろん、答えはイエスです。位置を使用：ヘルプに対して相対的ですが、次の仕様に準拠する必要があります。1。参照位置の要素は、相対位置の要素の前身である必要があります。
参照要素に対する相対的な配置
上記のコードから、box1がbox2の親要素であることがわかります（親要素はもちろん先行要素でもあります）。
2.参照位置決め要素を追加する必要がありますposition：relative;
box1 {
width:200px;
height:200px;
position:relative;
}
3. position：absoluteを位置決め要素に追加すると、上、下、左、右を使用してオフセット位置決めを行うことができます。
box2 {
position:absolute;
top:20px;
left:30px;
}で
このように、BOX2は、親要素BOX1（ここで参照オブジェクトがブラウザではなく、自由に設定することができることに留意されたい）に対して位置決めすることができます。