CSSレイアウトの4つの配置方法
1.静的（静的ポジショニング）：
デフォルト。配置しない場合、要素は通常のフローに表示されます（top、bottom、left、right、またはz-index宣言は無視されます）。前のエッセイを参照してください。
2.相対（相対配置）：
相対として配置された要素は通常のドキュメントフローから外れていますが、ドキュメントフロー内のその位置はまだ存在していますが、元の位置に対して視覚的に移動しています。
上、下、左、右の設定による通常の（元の）位置に対する相対的な配置。階層的なグレーディングは、z-indexを介して実行できます。
.static1{
height:80px;
background-color: red;
}
.relative{
height:80px;
position:relative;
top:40px;
left:40px;
background-color: black;
}
.static2{
height:80px;
background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="relative"></div>
<div class="static2"></div>
</body>
親の元のポイントをデフォルトで元のポイントと呼びます（親はposition属性を設定する必要はありません）。親が存在するかどうか、TRBLがあるかどうかに関係なく、上部に配置されます。親の左隅ですが、親のPaddingプロパティが影響します。
親がない場合、元のポイントはテキストフローの順序で前の要素の一番下にあります
3.絶対（絶対配置）：静的配置以外の最初の親要素に対して相対的に配置される絶対配置要素を生成します。要素の位置は、「左」、「上」、「右」、「下」の属性で指定されます。階層的なグレーディングは、z-indexを介して実行できます。
絶対として配置されたレイヤーは通常のドキュメントフローから分離されますが、相対との違いは、通常のフローでのその位置が存在しないことです。
この属性は常に誤解を招く可能性があります。position属性がabsoluteに設定されている場合、常にブラウザウィンドウに従って配置されると言うのは実際には間違っています。実際、これは固定属性の特徴です。
1. TRBL（上、右、下、左）がない場合は、親の左上隅を使用します。親がない場合は、ブラウザの左上隅を参照してください。
2. TRBLが設定されていて、親が位置属性を設定していない場合（position：static;属性の設定としてカウントされません）、現在の絶対値はブラウザーの左上隅を元のポイントとして配置されます。位置はTRBLによって決定されます。
3. TRBLが設定されていて、親が位置属性を設定している場合（絶対または相対に関係なく）、親の左上隅が位置決めの原点として使用され、位置はTRBLによって決定されます。親がPaddingプロパティを持っている場合でも、それは機能しません。
<style type="text/css"> .static1{ height:80px; background-color: red;
} .father{ height:100px; background-color: pink; position:relative; left:20px;
} .relative{ height:80px; width:80px; position:absolute; top:10px; left:10px; background-color: black;
} .static2{ height:80px; background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div>
4.固定（固定配置）：絶対位置の要素を生成し、ブラウザーウィンドウを基準にして配置します。要素の位置は、「左」、「上」、「右」、「下」の属性で指定されます。階層的なグレーディングは、z-indexを介して実行できます。
1. TRBL（上、右、下、左）がない場合、参照親の元のポイントはデフォルトで元のポイントになります（親は位置属性を設定する必要はありません）。
2. TRBLが設定されている場合は、ブラウザウィンドウを基準にして配置します。
<style type="text/css"> .static1{ height:80px; background-color: red;
} .father{ height:100px; width:300px; background-color: pink; left:100px; top:100px;
} .relative{ height:80px; width:80px; position:fixed; left:20px; background-color: black;
} .static2{ height:80px; background-color: blue;
}
</style>
</head>
<body>
<div class="static1"></div>
<div class="father">
<div class="relative"></div>
</div>
<div class="static2"></div></pre>
z-index属性
オブジェクトのスタック順序とも呼ばれるZインデックスは、整数を使用してスタックのレベルを定義します。整数値が大きいほど、スタックは高くなります。もちろん、これは同じレベルでの要素のスタックを指します。 。2つのオブジェクトがスタックされている場合この属性の値が同じである場合、HTMLドキュメント内のフローの順序に従ってスタックされ、後で記述されたオブジェクトが前のオブジェクトを上書きします。親子関係ではz-indexを使用して上下関係を設定することはできず、子は親の上にある必要があることに注意してください。
注：静的配置がある要素または位置配置がない要素のz-index属性は無効です。