ホームページ > 記事 > ウェブフロントエンド > CSS で配置された要素
CSS で配置された要素
- WBOY転載
- 2023-09-16 09:01:091219ブラウズ
position 属性は要素を配置するために使用されます。つまり、以下は位置決めされた要素です -
static - 要素ボックスは、前の要素と後の要素に続くように、通常のドキュメント フローの一部としてレイアウトされます。以前。
relative - 要素のボックスは通常のフローの一部としてレイアウトされ、ある程度の距離だけオフセットされます。
絶対 - 要素のボックスは、その要素を含むブロックに対して相対的に配置され、ドキュメントの通常の流れからは完全に削除されます。
修正 - 要素のボックスは絶対位置に配置され、「位置: 絶対」で説明されているすべての動作が行われます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
color: white;
text-align: center;
height: 100px;
width: 100px;
}
.static {
position: static;
background-color: greenyellow;
}
.relative {
position: relative;
left: 50px;
background-color: rgb(255, 47, 47);
}
.absolute {
position: absolute;
right: 50px;
top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>出力 上記のコードは次の出力を生成します -
以上がCSS で配置された要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。