CSS - ポジショニング

CSSは、HTML要素を配置するのに役立ちます。任意の場所に任意のHTML要素を配置できます。要素をページ内の自然な位置に対して相対的に配置するか、親要素に基づいて絶対的に配置するかを指定できます。

今、私たちは例ですべてのCSS位置決め関連プロパティを見るでしょう-

相対位置

相対配置は、通常表示される場所を基準にしてHTML要素の位置を変更します。したがって、「left：20」は、要素の左位置に20ピクセルを追加します。

2つの値_top_および_left_を_position_プロパティとともに使用して、HTMLドキュメント内の任意の場所にHTML要素を移動できます。

左に移動-_left_に負の値を使用します。
右に移動-_left_に正の値を使用します。
上に移動-_top_に負の値を使用します。
下に移動-_top_に正の値を使用します。

注-_top_および_left_と同様に、_bottom_または_right_の値も使用できます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <div style = "position:relative; left:80px; top:2px; background-color:yellow;">
         This div has relative positioning.
      </div>
   </body>
</html>

それは次の結果を生成します-

絶対位置

*position：absolute* の要素は、画面の左上隅を基準に指定された座標に配置されます。

2つの値_top_および_left_を_position_プロパティとともに使用して、HTMLドキュメント内の任意の場所にHTML要素を移動できます。

左に移動-_left_に負の値を使用します。
右に移動-_left_に正の値を使用します。
上に移動-_top_に負の値を使用します。
下に移動-_top_に正の値を使用します。

注-topおよびleftと同じ方法で、_bottom_または_right_の値も使用できます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         This div has absolute positioning.
      </div>
   </body>
</html>

固定位置

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

2つの値_top_および_left_を_position_プロパティとともに使用して、HTMLドキュメント内の任意の場所にHTML要素を移動できます。

左に移動-_left_に負の値を使用します。
右に移動-_left_に正の値を使用します。
上に移動-_top_に負の値を使用します。
下に移動-_top_に正の値を使用します。

注-_top_および_left_と同様に、_bottom_または_right_の値も使用できます。

ここに例があります-

<html>
   <head>
   </head>

   <body>
      <div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
         This div has fixed positioning.
      </div>
   </body>
</html>

Css-positioning

目次

CSS - ポジショニング

相対位置

絶対位置

固定位置