一般的な位置測位方法は次のとおりです。
1.静的デフォルト値。
（つまり、配置なし）通常のドキュメントフローオブジェクトに従います。
2.修正済み
絶対位置の要素を生成します。通常は、ブラウザウィンドウまたはiframeを基準にして配置されます。
要素の位置は、ブラウザウィンドウに対する固定位置です。
ウィンドウがスクロールしている場合でも、移動しません。
これは、一部のページのサイドナビゲーションバーと同じです。ページがどのようにスクロールしても、ナビゲーションバーの位置は変わりません。
3.相対
相対位置の要素を生成します。相対位置の要素の位置は、元の位置を基準にしています。元の場所は他の要素で占められませんが、絶対的な場所は異なります。元の場所は空になります。後ろに要素がある場合は、スペースを占有します。
注：相対的に配置された要素は、絶対的に配置された要素のコンテナブロックとしてよく使用されます。ただし、他の配置も絶対配置された要素コンテナとして使用できますが、静的には使用できません。要素が配置されていないことを意味するため、これがデフォルト値です。
例1：相対位置、元の位置は占有されていません
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 去掉默认样式 */
*{
margin: 0;
padding: 0;
}
.stage{
position: relative;
}
.box{
width: 300px;
height: 150px;
font-size: 30px;
color: whitesmoke;
font-weight: bolder;
margin-bottom: 10px;
}
.box1{
background-color: red;
}
.box2{
position: relative;
left: 100px;
background-color:blueviolet;
}
.box3{
background-color: green;
}
</style>
</head>
<body>
<div class="stage">
<div class="box box1">1</div>
<div class="box box2">我是相对定位的</div>
<div class="box box3">3</div>
</div>
</body>
</html>
例2：絶対測位、元の位置が占有されます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 去掉默认样式 */
*{
margin: 0;
padding: 0;
}
.stage{
position: relative;
}
.box{
width: 300px;
height: 150px;
font-size: 30px;
color: whitesmoke;
font-weight: bolder;
margin-bottom: 10px;
}
.box1{
background-color: red;
}
.box2{
position: absolute;
left: 100px;
background-color:blueviolet;
}
.box3{
background-color: green;
}
</style>
</head>
<body>
<div class="stage">
<div class="box box1">1</div>
<div class="box box2">我是绝对定位的</div>
<div class="box box3">3</div>
</div>
<script>
</script>
</body>
</html>
4.絶対
静的ではない（静的は定義されていない）最も近い親要素を基準にして配置された絶対配置要素を生成し ます。見つからない場合は、本体に基づいて配置されます。
注：配置により、要素の位置がドキュメントフローから独立するため、スペースを占有しません。