CSSでdivの位置を変更する方法

CSSのpositionを使用してdivの位置を変更することができます。position属性値の意味:

static: 要素ボックスは正常に生成されます。ブロックレベル要素はドキュメント フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上の行ボックスを作成します。

relative: 要素ボックスは特定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。

absolute: 要素ボックスはドキュメント フローから完全に削除され、そのボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。

修正: 要素ボックスは、その含まれるブロックがウィンドウ自体であることを除いて、位置を絶対に設定するのと同じように動作します。

ヒント: 要素の位置は通常のフロー内の位置に対して相対的なものであるため、相対配置は実際には通常のフロー配置モデルの一部とみなされます。

実験ケース:

1. div の位置値を設定して div の位置を調整する 簡単なコード例次のように:

body>
    <div id="div2"></div>
    <style>
        div{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: absolute;
            right: 200px;
            bottom: 200px;
        }
    </style>
</body>

2. 幅と高さが 200 ピクセル、本文の右側から 200 ピクセル、下から 200 ピクセルの div を設定します。

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