CSS の位​​置決めにより、コンテナ内での相対的な要素の配置をどのように実現できるでしょうか?

要素の相対配置のための CSS 配置

コンテナの左上隅を基準にして要素を配置する、クロスブラウザーで標準に準拠した保守可能な方法の探求CSS の配置によって実現できます。その方法を見てみましょう。

相対位置

CSS 位置: 相対;要素自体に対する相対的な要素の位置を設定します。レイアウト中は通常のフローに残り、指定された値によってオフセットされます。周囲の他の要素も一緒に移動しないことに注意してください。

絶対位置

position:Absolute;コンテナを基準にして要素を配置します。デフォルトでは、コンテナはブラウザ ウィンドウです。ただし、親要素にposition:relativeまたはposition:absoluteが設定されている場合、その要素は子の位置座標の親になります。

例

次のコードを考えてみましょう:

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

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

<div>

この例では、#box は #container 内に絶対的に配置されます。上端はコンテナの上端から 50 ピクセル、左端はコンテナの左から 20 ピクセルです。

以上がCSS の位​​置決めにより、コンテナ内での相対的な要素の配置をどのように実現できるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。