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