I.はじめに
CSS の位置決めは、ページ上の要素の位置と配置を制御するために使用される技術です。CSS には、通常フロー、フローティング フロー、および位置決めフローという3 つの基本的な位置決めメカニズムがあります。位置決めフローには、相対位置決め、絶対位置決め、および固定位置決めが含まれます。
- 通常のフロー: 要素はデフォルトの上から下または左から右の順序で並べ替えられます。
- フローティング フロー: フローティング要素を追加しました
- 位置決めフロー: 相対位置決め、絶対位置決め、固定位置決めを含む位置決め要素を追加しました。
次にブロガーがCSSの配置、CSSエッジオフセット、要素の表示・非表示の3つのパートから解説していきます。
2. 配置構成
位置決め: ボックスを特定の位置に設定します。位置決めとは、ボックスを配置し、位置決め方法に従ってボックスを移動することでもあります。
位置決め = 位置決めモード + エッジオフセット
配置モードは、ドキュメント内で要素を配置する方法を指定するために使用されます。エッジのオフセットによって要素の最終的な位置が決まります
1. 測位モード
配置モードは要素の配置方法を決定し、 CSS のpositionプロパティを通じて設定されます。
1.1、静的位置決め 静的
①、文法定義
静的配置は要素のデフォルトの配置方法であり、配置は行われません。
#静态定位语法
position: static
②. 特徴
- 静的位置決めでは、標準的な流量特性に従って位置が配置され、エッジ オフセットはありません。
- 静的な配置がレイアウトで使用されることはほとんどありません
1.2、相対位置決め相対
①、文法定義
相対配置とは、要素がその位置を移動するときに、元の位置を基準にして移動することを意味します。
#相对定位语法
position: relative
②. 特徴
- 元の位置を基準に移動します（位置を移動するときの基準点は元の位置です）
- 標準フロー内の元の位置は引き続き占有され、次のボックスは依然として標準フロー方法でそれを扱います (ラベルを剥がさなくても元の位置は失われません)
③、コード例
<!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>
.box1 {
//设置盒子相对定位
position: relative;
left: 130px;
top: 140px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: palegreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
1.3、絶対位置決め 絶対
①、文法定義
絶対配置とは、要素がその位置を移動するときに、その位置がその祖先要素に対して相対的に移動することを意味します。
#绝对定位
position: absolute
②. 特徴
- 祖先要素がない場合、または祖先要素が配置されていない場合は、ブラウザが優先されます。
- 祖先要素に位置指定 (相対、絶対、固定) がある場合、最も近い位置にある祖先要素の非参照点を使用して要素を移動します。
- 絶対位置決めが元の位置を占めなくなりました(適応外)
③、コード例
1) 祖先要素が存在しないか、祖先要素が配置されていません。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
position: absolute;
left: 300px;
bottom: 390px;
width: 200px;
height: 200px;
background-color: pink;
}
.big {
width: 500px;
height: 500px;
background-color: palegreen;
}
</style>
</head>
<body>
<div class="big">
<div class="box1"></div>
</div>
</body>
</html>
2)、祖先要素には位置があります。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
position: absolute;
left: 30px;
bottom: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
.big {
width: 500px;
height: 500px;
background-color: palegreen;
}
.bbig{
position: relative;
width: 700px;
height: 700px;
padding: 20px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="bbig">
<div class="big">
<div class="box1"></div>
</div>
</div>
</body>
1.4、固定位置固定
①、文法定義
- 固定配置とは、要素がブラウザのビューポート内で固定されたままになる場所です。主な使用シナリオ: ブラウザーのページがスクロールされても要素の位置は変わりません。
#固定定位fixed
position: fixed
②. 特徴
- ブラウザの表示ウィンドウを基準点として要素を移動
a. 親要素とは無関係
b. スクロールバーでスクロールしない - 固定位置は以前の位置を占めなくなりました
③、コード例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.big {
position: fixed;
top: 100px;
right: 40px;
}
</style>
</head>
<body>
<div class="big">
<img src="../02/images/user.png" alt="">
</div>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
</body>
④、固定測位アルゴリズム
ボックスがコアの右側に固定されている場合
- 固定位置ボックスを左にします: 50% がブラウザの表示領域 (バージョン中心) の半分に配置されます。
- 固定位置決めボックスのマージン左をコア幅の半分の幅にします。コア幅の半分の位置
1.5、スティッキー位置決めスティッキー
①、文法定義
- スティッキー ポジショニングは、相対ポジショニングと固定ポジショニングのハイブリッドとして考えることができます。
#粘性定位sticky
position: sticky
②. 特徴
- ブラウザの表示可能なウィンドウを基準点として使用して要素を移動します (固定位置機能)
- スティッキーポイントは元の位置を占めます (相対位置決め機能)
- 有効にするには、上、左、右、下のいずれかを追加する必要があります
③、コード例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 3000px;
}
.fixed{
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="fixed">导航栏</div>
</body>
1.6. スタッキング順序の Z インデックスの配置
①、文法定義
配置されたレイアウトを使用する場合、ボックスが重なる場合があります。現時点で使用できるのは、Zインデックスボックスの順序を制御するには
#定位叠放次序
z-index: 数值
②. 特徴
- 値は正の整数、負の整数、または 0 です。デフォルトは自動です。値が大きいほど、ボックスの高さが高くなります。
- 属性値が同じ場合は優先順に書き込まれます
- 番号の後に単位を追加することはできません
- 配置されたボックスのみが z-index プロパティを持ちます。
3. ポジショニングの概要
1. 絶対配置されたボックスは中央に配置されます
絶対配置のボックスは、margin: auto では水平方向に中央揃えできませんが、次の計算方法で水平方向と垂直方向に中央揃えにすることができます。
- letf: 50%、ボックスの左側を親要素の水平方向の中央に移動させます。
- margin-left: -100px、ボックスをその幅の半分に移動させます
2. 特別な機能を見つける
絶対位置決め位置：絶対、固定位置決め位置：固定もフローティングフロートと同様です
- インライン要素に絶対位置または固定位置を追加し、高さと幅を直接設定できます
- ブロックレベル要素に絶対または固定位置を追加します。幅と高さが指定されていない場合、デフォルトのサイズはコンテンツのサイズです。
3. 適応外ボックスはマージン崩壊を引き起こしません
フローティング要素、絶対配置 (固定配置) 要素はマージン統合の問題を引き起こしません
4. 絶対位置決め（固定位置決め）はボックスを完全に押し込みます
- フローティング要素は異なります。その下の標準フロー ボックスのみが抑制されますが、その下の標準フロー ボックス内のテキスト/画像は抑制されません。
- 絶対位置決め（固定位置決め）は、以下の標準フローの内容をすべて抑制します。
4. エッジオフセット
エッジ オフセットは、最終位置に移動するボックスの位置決めです。
5. 要素の表示と非表示
1. 表示 表示 非表示
- 表示: なし
a. 隠しオブジェクト - display: block
a. ブロックレベルの要素に変換することに加えて、要素を表示することも意味します - 表示が要素を非表示にすると、要素は元の位置を占めなくなります
2、可視性表示非表示
- 可視性: 可視
a. 要素は可視です - 可視性: 非表示
a. 要素が非表示 - 可視性によって要素が非表示になった後も、要素は元の位置を占め続けます。
3、オーバーフロー オーバーフロー表示非表示
- オーバーフロー: 表示
a. コンテンツは切り取られず、スクロール バーも追加されません。 - overflow: hidden
a. オブジェクトのサイズを超える内容は表示せず、余分な部分を非表示にします - オーバーフロー: スクロール
a. 内容がオーバーするかどうかに関わらず、常にスクロールバーが表示されます。 - overflow: auto
a. オーバーフローを超えた場合はスクロールバーが自動表示され、オーバーフローを超えていない場合はスクロールバーが表示されません。
4. 3 つの違い
- 表示には非表示の要素が表示されますが、その位置は保持されません
- 可視性は非表示の要素を表示しますが、元の位置は保持します
- オーバーフロー オーバーフロー表示は非表示になりますが、オーバーフローの部分処理のみを対象とします。
6. 息子の絶対的な父の起源
息子と父親: 子が絶対配置 (絶対) の場合、親は相対配置 (相対) を使用する必要があります。
相対配置は、絶対配置の親としてよく使用されます。
- 子は絶対的に配置され、位置を占有しません。親ボックス内のどこにでも配置でき、他の兄弟ボックスには影響しません。
- 親ボックス内での子ボックスの表示を制限するには、親ボックスを配置する必要があります
- 親ボックスを配置するときは、親ボックスを位置に配置する必要があります。親ボックスを絶対配置すると、親ボックスは子ボックスの下に並んでしまうため、親ボックスは相対的に配置することしかできません。
概要:親は位置を占有する必要があるため、相対配置であり、子ボックスは位置を占有する必要がないため、絶対配置です。