ホームページ > 記事 > ウェブフロントエンド > CSSの絶対配置
4 つの位置決めモード: 静的、相対、絶対、固定
4 つの位置決め: 左、右、上、下
位置属性: 位置、4 つのステータス値
1.static: 静的位置決め、配置要素はドキュメント フロー内の順序で配置されます。これはデフォルト値です。4 つの位置は無効です
2.relative: 要素はドキュメント フロー内の元の位置に相対的に配置されます。4 つの位置が有効です。
3. 絶対: 絶対配置。要素は、ドキュメント フローの外で、位置決めの親に対して相対的に配置されます。4 つの位置が有効です。4.fixed: 固定配置。絶対配置クラスと同様、ドキュメント フロー外でもあります。 、ページ上の要素の位置固定、ページと一緒にスクロールしません、4 つの位置が有効です<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2.绝对定位</title> <style> /*body {*/ /*border: 1px solid red;*/ /*}*/ .box { width: 600px; height: 600px; background-color: yellow; } .box1 { width:200px; height: 200px; background-color: lightskyblue; position: absolute; top:0; right:0; } .box2 { width:200px; /*width:250px;*/ height: 200px; /*height: 250px;*/ background-color: lightgreen; } .box3 { width:200px; height: 200px; background-color: lightcoral; /*珊瑚色*/ } .box4 { width:200px; height: 200px; background-color: brown; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html>
以上がCSSの絶対配置の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。