CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのposition:absoluteで要素を自由に配置する方法

CSSによる絶対位置指定（absolute）とは

position: absolute を指定した要素は、基準位置（画面の左上隅）から指定した座標に従って配置されます。

position プロパティに top と left の2つの値を組み合わせることで、HTMLドキュメント内の任意の場所へ要素を自由に移動させることができます。

top / left の値と移動方向の関係

  • 左へ移動 — left に負の値を指定します。
  • 右へ移動 — left に正の値を指定します。
  • 上へ移動 — top に負の値を指定します。
  • 下へ移動 — top に正の値を指定します。

補足として、親要素に position: relative などの位置指定が設定されている場合は、画面ではなくその親要素が基準点になります。親に位置指定がない場合は、ページ全体（初期包含ブロック）の左上隅が基準となります。この仕様を理解しておくと、意図しないズレを防げます。

実装例

以下のコードを実行すると、絶対位置指定の実際の動作を確認できます。

<html>
   <head>
   </head>
   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         このdivは絶対位置指定されています。
      </div>
   </body>
</html>

  1. CSSの絶対配置（position: absolute）とは？使い方をサンプルコードで解説

    CSSにおける絶対配置（absolute positioning）とは、要素を「static以外のpositionプロパティが設定された、最も近い祖先要素」を基準として配置する方法です。position: absolute;を指定した要素は、top・right・bottom・leftといったオフセットプロパティを使って正確な位置を決定できます。絶対配置された要素は通常のドキュメントフローから取り除かれるため、他の要素のレイアウトには影響を与えません。この特性を活かすことで、要素の重ね合わせや中央寄せなど、柔軟なレイアウトが実現できます。サンプルコード1：絶対配置で要素を中央に配置する以下は、C

  2. CSSアニメーションで要素を円形の軌道上に移動させる方法

    CSSアニメーションを活用すると、rotate（回転）とtranslate（平行移動）を組み合わせることで、要素をさまざまな方法で動かすことができます。 本記事では、このテクニックを応用して、要素を円形の軌道（サーキュラーパス）に沿って移動させる方法を解説します。 円形移動の仕組み ポイントは、@keyframesの中で以下の3つの変換を組み合わせることです。 rotate()：要素を回転させ、移動する向きを決める translateX()：回転させた方向へ要素を押し出し、中心からの距離を作る rotate()（逆回転）：要素自体の傾きを打ち消し、常に直立した状態を保つ アニメーションの進