CSS の配置 CSS の配置メカニズム
CSS には、通常のフロー、フローティング、絶対配置という 3 つの基本的な配置メカニズムがあります。
特に指定しない限り、すべてのタグは通常のストリームに配置されます。
ブロックレベルの要素は上から下に順番に配置され、ボックス間の垂直距離はボックスの垂直マージンによって計算されます。
インラインボックスは横一列に配置されます。水平方向のパディング、境界線、マージンを使用して、それらの間の間隔を調整できます。
position 属性
position 属性を使用すると、要素ボックスの生成方法に影響する 4 つの異なるタイプの配置を選択できます。
4 つの属性値が含まれます: static、relative、absolute、fixed
static: 要素ボックスは通常どおり生成されます。ブロックレベルの要素はドキュメント フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上の行ボックスを作成します。 relative: 要素ボックスは特定の距離だけオフセットされます。要素は配置されていない形状を保持し、要素が元々占有していたスペースも保持されます。 absoulte : 要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロックに対して相対的に配置されます。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。ブロック要素は、通常のドキュメント フローで最初に生成されたボックスのタイプに関係なく、要素が配置されるときに生成されます。 修正: 要素ボックスは位置を絶対に設定するように動作しますが、そのボックスを含むブロックはブラウザ ウィンドウです。
コード表示
position: static;
staticはposition属性のデフォルト値であり、特別な位置指定はありません。いずれも通常の位置です。
position:relative;
HTMLコード:
1 | <p class="p1"> 我是p1</p><p class="p2"> 我是p2</p><p class="p3"> 我是p3</p>
|
ログイン後にコピー
CSSコード:
1 | .p1 { position: relative; left: 30px;}.p2 { position: relative; right: 30px;}
|
ログイン後にコピー
レンダリング:
説明:
position:relative; 参照は元の位置です。 テキストの最初の行は、position を相対に設定します。これにより、反応は発生しませんが、p1 に left: 30px; も設定します。これにより、要素と左側の間に 30 ピクセルのギャップが作成されます。 同様に、テキストの 2 行目に right: 30px を設定すると、要素は右側から 30px 離れて表示され、画面の外に実行されます サードパーティは何も処理せず、通常どおり表示されます 適切な位置: 相対; に設定する必要があることに注意してください。そうしないと、上、右、下、左が機能しません。
position: absoulte;
HTML コード:
1 | 啦啦啦啦啦<h1 class="h1">我是h1大标题</h1>
|
ログイン後にコピー
CSS コード:
1 | .h1 { position: absolute; top: 100px; left: 100px;}
|
ログイン後にコピー
CSS スタイルを設定しない場合の外観:
CSS スタイルを設定した後の外観:
説明:
Position:Absolute; は、それ自体の親ビューである、それ自体を含むブロックを参照します Position:Absolute; 属性が設定されている場合、ラベルの位置は絶対になります。このとき、top、right、bottom、leftのいずれかの属性を設定することでラベルの位置を設定できます。
position:Absolute; を設定する必要があることに注意してください。そうしないと、top、right、bottom、left が機能しません。
位置: 固定;
HTML コード:
1 | <p class="one"> 我是p one</p><p class="two"> 我是p two</p>
|
ログイン後にコピー
CSS コード:
1 | .one { position: fixed; top: 100px; left: 30px;}.two { position: fixed; top: 50px; right: 30px;}
|
ログイン後にコピー
効果表示:
説明:
位置: 固定;参照システムはブラウザウィンドウです
与えられたときPosition:fixed; 属性がタグに設定されると、これらのタグは Web ページのスクロールを無視して、ブラウザウィンドウに対する相対的な位置のみを設定します 同様に、position:fixed; 属性が設定されていない場合は、topと右側は直接設定されており、下と左は機能しません
参考記事：http://www.w3school.com.cn/css/css_positioning.asp
インターフェースのレイアウト優先z-indexの問題について
1 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style media="screen"> div{ width: 100px; font-size: 50px; position: absolute; height: 100px; } .a{ background-color: red; left: 0; top: 0; z-index: 3; } .b{ background-color: blue; left: 40px; top: 40px; z-index: 2; } .c{ background-color: green; left: 80px; top: 80px; z-index: 100; } </style></head><body><div class="a">1</div><div class="b">2</div><div class="c">3</div></body></html>
|
ログイン後にコピー
Aboutインターフェース要素 ボックスオフセット
オフセット前:
オフセット後:
1 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap{ width: 300px; height: 300px; border: 1px solid red; margin: 100px; padding: 100px; position: relative; padding-left: 0; } .inner{ width: 200px; height: 200px; background-color: green; padding: 50px; position: relative; } .content{ width: 50px; height: 50px; background-color: red; position: absolute; left: 0; } </style></head><body> <!-- position:absolute;默认是相对于窗口进行定位 --> <div class="wrap"> <div class="inner"> <div class="content"></div> </div> </div></body></html>
|
ログイン後にコピー
7287
9
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
