CSS を使用してコンテナ内に要素を正確に配置するにはどうすればよいですか?

コンテナを基準にして要素を配置する

コンテナ内に配置する必要がある要素を作成する場合、CSS は正確な制御を提供する柔軟なオプションを提供しますブラウザ間の互換性。

位置: relative

• 要素をそれ自体に対して相対的に配置します。
• 要素は通常のフローから削除され、指定された値 (上、右、下、左) だけオフセットされます。
• 周囲の要素のレイアウトには影響しません。

位置:絶対

• コンテナを基準にして要素を配置します。
• デフォルトでは、コンテナはブラウザ ウィンドウです。
• 親要素に位置がある場合:相対または位置: 絶対セット。位置を設定するための親として機能します。

例:

<div>

#container {
  position: absolute;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: relative;
  top: 50px;
  left: 20px;
}

このコードは、#box 要素を # の上から 50 ピクセル、左から 20 ピクセルの位置に配置します。コンテナ要素。コンテナ内での配置を正確に制御できます。

以上がCSS を使用してコンテナ内に要素を正確に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。