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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
