CSSでの位置の使い方

CSS の Position 属性は、ドキュメント フロー内の要素の位置を定義するために使用されます。 可能な値は次のとおりです: static (デフォルト): 要素はドキュメント フロー内で通常の順序で配置されます。相対: 要素を元の位置に対して一定の距離だけ移動しますが、ドキュメント フロー内には残ります。絶対: ドキュメント フローから要素を削除し、その要素を親要素またはルート要素に対して相対的に配置します。修正: ブラウザのビューポート内の要素を、ページがスクロールされても移動しないように修正しました。

CSS での位置の使用

position プロパティは、HTML ドキュメント フロー内の要素と周囲の要素の位置を定義します。要素が静的、相対、絶対、または固定であるかどうかを指定できます。

1. 静的 (デフォルト)

静的配置はデフォルトの配置であり、要素はドキュメント フロー内の通常のスペースを占めます。

2. 相対

相対配置では、要素をドキュメントの流れから外すことなく、通常の位置から一定の距離だけ移動します。

3. 絶対

絶対配置は、ドキュメント フローから要素を削除し、その親要素またはルート要素に基づいて配置します。

4. 固定

固定配置では、ブラウザのビューポート内の要素が固定され、ページがスクロールされても移動しません。

Usage

position 属性の構文は次のとおりです:

<code class="css">position: value;</code>

ここで、値は次の値のいずれかになります。

例

• 以下の例 相対的に配置された div 要素を右に 10px 移動します:

• <code class="css">div {
    position: relative;
    right: 10px;
  }</code>

次の例は、div 要素をページの右下隅に絶対に配置します:

• <code class="css">div {
    position: absolute;
    bottom: 0;
    right: 0;
  }</code>

• 注:

位置決め属性を持つ要素のみ左、右、上、下の属性を設定できます。

相対的に配置された要素はドキュメント フロー内のスペースを占有しますが、絶対的に配置された要素は占有しません。

固定位置の要素はページのスクロールに合わせて移動しませんが、他の要素の位置に影響します。

以上がCSSでの位置の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。