ホームページ  >  記事  >  ウェブフロントエンド  >  CSSを使って配置するにはどうすればいいですか? CSSのレイアウトと配置について詳しく解説

CSSを使って配置するにはどうすればいいですか? CSSのレイアウトと配置について詳しく解説

云罗郡主
云罗郡主オリジナル
2018-10-31 17:29:172768ブラウズ

CSS を使用して配置するにはどうすればよいですか? CSS は HTML 要素の配置に役立ちます。任意の HTML 要素を好きな場所に配置できます。要素をページ上の自然な位置を基準にして配置するか、親要素の定義に基づいて配置するかを指定できます。以下で CSS のレイアウトと配置について説明します。

CSSを使って配置するにはどうすればいいですか? CSSのレイアウトと配置について詳しく解説

1: 相対配置

相対配置では、通常の表示位置を基準にして HTML 要素の位置が変更されます。 left:20 は、要素の LEFT 位置に 20 ピクセルを追加します。 [推奨読書: 相対配置、絶対配置、固定配置の詳細な説明]

top と left の値と、position 属性を使用できます。 HTML 要素をドキュメント内の任意の場所に HTML に移動します。

左に移動 - 左側に負の値を使用します。

右に移動 - 左側に正の値を使用します。

上に移動 - 一番上の負の値を使用します。

下に移動 - 上に正の値を使用します。

注 - 上と左と同じように下または右の値を使用することもできます。

2: 絶対配置

position: 絶対要素は、画面の左上隅を基準とした指定された座標に配置されます。

top 値と left 値、およびposition 属性を使用して、HTML 要素を HTML ドキュメント内の任意の位置に移動できます。

左に移動 - 左側に負の値を使用します。

右に移動 - 左側に正の値を使用します。

上に移動 - 一番上の負の値を使用します。

下に移動 - 上に正の値を使用します。

注 - 上と左と同じように下または右の値を使用することもできます。

3: 固定配置

固定配置を使用すると、スクロールに関係なく、要素の位置をページ上の特定の位置に固定できます。指定された座標はブラウザ ウィンドウに対する相対座標になります。

top 値と left 値、およびposition 属性を使用して、HTML 要素を HTML ドキュメント内の任意の位置に移動できます。

左に移動 - 左側に負の値を使用します。

右に移動 - 左側に正の値を使用します。

上に移動 - 一番上の負の値を使用します。

下に移動 - 上に正の値を使用します。

注 - 上と左と同じように下または右の値を使用することもできます。

上記は CSS を使用して配置する方法についてです。 CSS のレイアウトと配置について詳しく説明しています。CSS チュートリアル について詳しく知りたい場合は、php 中国語の Web サイトを参照してください。


以上がCSSを使って配置するにはどうすればいいですか? CSSのレイアウトと配置について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。