この記事の内容は、CSS の位置に関する詳細な説明 (コード例) を共有することです。必要な方は参考にしていただければ幸いです。
CSS 位置プロパティは多用途かつ強力です。要素の位置を設定または変更できます。可能な値は 4 つあります: 静的 (デフォルト)、相対、絶対、固定。 (推奨コース: css ビデオ チュートリアル )
通常、4 つの座標属性: left、right、top、bottom
static # で使用されます。
##これはデフォルトの位置値です。静的要素は自然な流れのみに従います。これらは、左、右、上、下の値の影響を受けません。relative
position が相対に設定されている場合、要素は現在の位置に基づいて移動できます。1 2 3 |
|
1 |
|
赤い境界線は、本来あるべき位置に対して、左から 20 ピクセル、上から 10 ピクセル移動します。 青い段落はまったく移動していないことに注意してください。相対配置を使用すると、レイアウトを崩さずに赤い段落を自由に移動できます。唯一不適切なのは、それ自体を除く他のすべての要素が、その要素が移動したことを認識していないことです。
absolute
位置が絶対に設定されている場合、要素は最初に配置された要素に基づいて移動できます。「位置決め?位置決め要素とは何ですか?」
位置決め要素は、値が相対、絶対、または固定の位置です。したがって、位置が未設定または静的でない限り、要素は配置されます。 位置指定要素の特徴は、子要素の参照点として機能できることです。 単純な階層を想像してみましょう:1 2 3 |
|
1 2 |
|
左右を設定するとどうなるでしょうか?
幅が設定されていない場合、left: 0 と right: 0 を適用すると、要素が幅全体に引き伸ばされます。左: 0、幅: 100% に設定したことと同等です。 width が設定されている場合、right は値を破棄します。fixed
位置を固定に設定すると、絶対位置と同様に機能し、左/右および上/下の座標を設定できます。 唯一の違いは、参照点がビューポートであることです。これは、固定要素が画面に固定されているため、ページと一緒にスクロールしないことを意味します。以上がCSSでの位置の詳しい説明(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。