CSS の相対位置および絶対位置により、コンテナ内の要素の配置をどのように正確に制御できるでしょうか?

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

Web デザインでは、コンテナ内の要素のレイアウトを正確に制御する必要があるシナリオに遭遇することがよくあります。彼らのコンテナ。 CSS は、これを実現するための強力な配置オプションを提供します。

相対配置の使用

position:relative プロパティは、フロー内の現在の位置を基準にして要素を配置します。これは、要素がフローから削除されても、元の位置にあるかのようにスペースを占有することを意味します。その後、top、right、bottom、left プロパティを使用してオフセットを指定し、配置を調整できます。

絶対位置の使用

より正確に制御するには、position:Absolute を使用します。 。これにより、親コンテナを基準にして要素が配置されます。親にposition:relativeまたはposition:absoluteが設定されている場合、要素はブラウザウィンドウの座標ではなくその座標を使用します。

例

これを示すコード例は次のとおりです。絶対配置:

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

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

<div>
<p>この例では、#box div は上から 50 ピクセルの位置にあり、親コンテナ #container の左端から 20px。コンテナ自体は、子の位置決めコンテキストを確立するために、position:relative に設定されます。</p>
<p><strong>重要な考慮事項</strong></p>
<ul>
<li>
<strong>ブラウザ間の互換性:</strong> 相対位置および絶対位置は、すべての主要なシステムで広くサポートされています</li>
<li>
<strong>癖モード:</strong> 癖モードと標準モードの両方で動作します。</li>
<li>
<strong>清潔さとカスタマイズ:</strong> ハックの代わりに位置決めプロパティを使用します。 、コードはクリーンなままで、カスタマイズが容易です。</li>
<li>
<strong>JavaScript不要:</strong> これらのテクニックは純粋に CSS だけで実現でき、JavaScript は必要ありません。</li>
</ul>
</div>

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