Web ページ内で要素を配置する方法を制御したい場合は、position CSS プロパティ を使用する必要があります。ドキュメント内の要素の位置を定義するプロパティは必須であり、その上、左、下、右のプロパティと位置は、4 つのプロパティすべてを設定するために使用できる短縮プロパティです。
以下は、location 属性で使用できる値を指定します -
静的 - 要素はドキュメントの自然な流れに従って配置されます。上、右、下、左、または Z インデックスのプロパティに違いはありません。これはデフォルトのオプションです。
Relative - 要素はドキュメントの自然な流れに従って配置され、それ自体に対する相対的なオフセットは、top、right、bottom、および の値によって決定されます。左。オフセットは他の要素の位置に影響を及ぼさないため、ページ レイアウト内の要素に割り当てられるスペースは、位置が静的な場合と同じです。
z-index の値が auto ではない場合、この値は新しいスタック コンテキストを確立します。 table-*-groups、行、列、セル、および table-caption の要素にどのような影響を与えるかは未定義です。
絶対 - 要素は通常のドキュメント フローから削除されており、ページ レイアウトには要素を配置するスペースは残されていません。存在する場合は、その祖先と関連付けます。そうでない場合は、最初に含まれるブロックを基準にして配置します。上、右、下、左の値によって最終的な位置が定義されます。
z-index の値が auto ではない場合、この値は新しいスタック コンテキストを確立します。絶対配置により、ボックスのマージンが他のマージンと重なることがなくなります。
修正 - この要素は通常のドキュメント フローから削除されており、ページ レイアウトにはその要素を入れる余地がありません。ただし、祖先のいずれかが、transform、perspective、または filter プロパティを none 以外に設定している (CSS Transforms Spec を参照) か、will-change プロパティをtransform に設定している場合は除きます。この場合、祖先は包含ブロックとして機能します。これは、ビューポートによって確立された最初の包含ブロックを基準にして配置されます。 (ブラウザ間の視野角とフィルターの違いにより、ブロックが閉じられる場合があることに注意してください。) 上、右、下、左の値は、最終的な位置を定義します。
スティッキー - 要素は、文書の自然な流れに従って、上、右、下、左の値に基づいて配置され、最も近いスクロール祖先を基準にしてオフセットされます。テーブル関連の要素を含む包含ブロック (ブロック レベルの最も近い祖先)。他の要素の位置はオフセットの影響を受けません。
新しいスタック コンテキストは常にこの値で作成されます。スティッキー要素は、その祖先が真に最も近い祖先でなくても、「スクロール メカニズム」（オーバーフローが非表示、スクロール、自動、またはオーバーライドされたときに生成される）を持つ最も近い祖先に「くっつく」ことに注意してください。スクロール。
相対的に配置された要素は、計算された位置として「相対」を使用する要素を指します。一方、絶対的に配置された要素は、計算された位置として「絶対」または「固定」を使用する要素を指します。
以下は相対位置指定を使用したサンプルコードです。
リーリー以下は絶対位置決めを使用したサンプルコードです。
リーリーこれで、位置決めの仕組みと CSS での絶対位置決めの使用方法が理解できました。私たちは目の前の問題を解決するために私たちの知識を応用します。
＃＃＃例＃＃＃要約すると、配置要素を使用すると、ページ上の正確な位置を指定することでボタンを新しい行にレンダリングできるようになります。これを行うには、要素の「position」プロパティを「absolute」に設定し、配置する正確な位置を示すために、top、left、right、またはbottomプロパティの値を指定します。絶対配置を正しく使用すると、最小限の労力できれいなレイアウトを作成できます。
以上が新しい行に絶対レンダリングボタンを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
