相対配置と絶対配置の CSS 例_CSS/HTML

.a、.b、.c、.d、.e
{
幅: 100px;
高さ: 100px;
マージン: 5 auto;
カラー: #fff ;
背景: #000;
}
.aa、.bb、.cc、.dd、.ee
{
上: 10px;
左: 10px;
幅: 10px;
高さ: 10px;
オーバーフロー: 非表示;
背景: #F90;
}
.b, .d, .e
{位置: 相対; }
.cc、.dd、.ee
{位置: 絶対;}

A: 位置は設定されていません。一般的な入れ子関係は
< です。 ; /div>

B: 外側の div のみが相対的な一般的なネスト関係に設定されます
< ;/div>

C: 内部 div のみが絶対に設定され、ドキュメントはネストされています関係、ページ 内部 div は浮動 [非浮動] であり、ページに対して相対的に配置され、外部 div とは何の関係もありません。

.a、.b、.c、.d、.e
{
幅: 100px;
高さ: 100px;
マージン: 5 auto;
カラー: #fff ;
背景: #000;
}
.aa、.bb、.cc、.dd、.ee
{
上: 10px;
左: 10px;
幅: 10px;
高さ: 10px;
オーバーフロー: 非表示;
背景: #F90;
}
.b, .d, .e
{位置: 相対; }
.cc、.dd、.ee
{位置: 絶対;}

A: 位置は設定されていません。一般的な入れ子関係は
< です。 ; /div>

B: 外側の div のみが相対的な一般的なネスト関係に設定されます
< ;/div>

C: 内部 div のみが絶対に設定され、ドキュメントはネストされています関係、ページ 内部 div は浮動 [非浮動] であり、ページに対して相対的に配置され、外部 div とは何の関係もありません。

D: 外側の div は次のように設定されます。相対、内部 div は相対に設定されます。 div は絶対に設定され、内部 div は浮動し、外部 div に対して相対的に配置されます

D: 外側の div は相対に設定され、内側の div は相対に設定され、内側の div は浮動して外側の div に対して相対的に配置されます

E: これは、境界問題。 -10 != 逆の 10 ピクセル間隔