ホームページ > 記事 > ウェブフロントエンド > css3の配置にはいくつかの種類があります
css3の配置にはいくつかの種類があります
- 青灯夜游オリジナル
- 2021-12-15 11:07:411871ブラウズ
css3 の配置には 4 つのタイプがあります: 1. 相対 (相対配置)、オフセット参照要素は要素自体であり、要素がドキュメント フローから切り離されることはありません; 2. 絶対 (絶対)位置決め)、最も近い親要素 位置決め要素は基準座標です; 3. 固定 (固定位置決め); 4. 静的 (静的位置決め)。
このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。
CSS の位置決めには 4 つの異なるタイプがあります。位置の値は次のとおりです: static、relative、absolute、fixed
1. Relative (相対位置決め)
relative相対位置決めのためのオフセット参照要素は要素そのものであり、要素のエラーは発生しません。ドキュメント フロー から抜け出すため。 要素の初期位置が占めるスペースは保持されます。 相対的に配置された要素は、絶対的に配置された要素の親要素としてよく使用されます。また、位置決めされた要素は、多くの場合、z-index 属性を使用して階層的に等級付けされます
##コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.rel{
width: 200px;
height:200px;
background: red;
position: relative;
top:200px;
left: 200px;
}
</style>
</head>
<body>
<p class="rel">相对定位</p>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
</body>
</html>レンダリング:
##rel 要素は偏って移動しますが、テキストは元の位置を埋めません。相対的に配置された要素がドキュメント フローから切り離されず、元の位置が保持されたままであることがわかります。
##2. Absolute (絶対位置決め)Absolute配置要素
は、親要素内で最も近い配置要素を参照座標として取得します。 絶対配置要素の親要素が配置を使用しない場合、絶対配置要素の参照オブジェクトは、要素は html, 要素はドキュメント フローから抜け出します。 あたかも が ドキュメント ストリームから削除されたかのようです。 ##また、位置決めされた要素は、多くの場合、z-index 属性を使用して階層的に等級付けされます##コード例:
#
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.abs{
width: 200px;
height:200px;
background: red;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div>绝对定位</div>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
</body>
</html>レンダリング: 噂を払拭させてください。 絶対配置された要素の親要素が配置を使用しない場合、この絶対配置された要素の参照オブジェクトは誰ですか?それが本文であるという人もいますし、ドキュメントであるという人もいます。実際、どちらでもありません。MDN の概要を読んだ後、は最初の包含ブロックを参照として受け取ります。そのサイズはビューポートと一致しますが、ビューポートによって生成されるのではなく、ルート要素
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin:0px;
padding:0px;
}
body {
height:1500px;
}
div {
width:100px;
height:100px;
background:green;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>インスタンスのレンダリング:
参照オブジェクトが body またはドキュメントの場合、p 要素はページの最下部に配置する必要があります。ここにはスクロール バーがあり、要素はビューポートの最下部にのみ配置されることに注意してください。
#3、
固定 (
固定位置)変位の基準座標は視覚ウィンドウであり、ドキュメント フローから切り離すために固定要素が使用されます。 また、位置決めされた要素は、多くの場合、z-index 属性を使用して階層的に等級付けされます。
コード例: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.fix{
width:200px;
height: 200px;
background: red;
position: fixed;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div>固定定位</div>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
阿什顿发斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬</br>
</body>
</html>Exampleレンダリング:
固定固定位置と絶対位置は似ています。どちらも要素の移動を引き起こす可能性があります。上記は固定位置を示しています。これまでのところ、絶対位置の違いを確認するには、テキストにさらにテキストを追加して、ブラウザにスクロール バーを生成させます。 スクロール バーをドラッグして違いを確認してください。固定配置要素は、その名前が示すように、特定の位置に固定できます。絶対位置指定では、スクロール バーのスクロールに応じて位置が移動します。
4. static (静的配置)
デフォルト値、要素ボックスは通常どおり生成され、左上、右下のオフセット プロパティはその静的配置に影響しません。通常表示
(学習ビデオ共有: css ビデオ チュートリアル)
以上がcss3の配置にはいくつかの種類がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。