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

CSSのposition: absolute;プロパティの使い方を解説

position: absolute;とは

CSSのposition: absolute;プロパティは、最も近い位置指定された祖先要素（positioned ancestor）を基準として、要素を自由に配置するためのプロパティです。

ここでいう「位置指定された祖先要素」とは、positionプロパティにrelative、absolute、fixed、stickyのいずれかが設定されている要素を指します。該当する祖先要素が存在しない場合は、ページ全体（初期包含ブロック）が基準になります。

使用例

以下のコードを実行して、CSSのposition: absolute;の実装方法を確認してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.one {
        position: relative;
        width: 500px;
        height: 150px;
        border: 2px solid blue;
      }
      div.two {
        position: absolute;
        top: 70px;
        right: 0;
        width: 300px;
        height: 50px;
        border: 2px solid yellow;
      }
    </style>
  </head>
  <body>
    <h2>position: absolute;</h2>
    position: absolute;プロパティを使うと、最も近い位置指定された祖先要素を基準に要素を配置できます。
    <div class = "one">このdivには position: relative; を設定
      <div class = "two">このdivには position: absolute; を設定</div>
    </div>
  </body>
</html>

コードのポイント

  • 外側のdiv（class="one"）にposition: relative;を設定し、子要素の配置基準となるコンテナを作成しています。
  • 内側のdiv（class="two"）にposition: absolute;を設定し、top: 70px;とright: 0;を指定することで、親要素の上端から70px下、右端にぴったりと寄せた位置に配置されます。

このように、position: absolute;は親要素との組み合わせで使うことで、バナーやラベル、オーバーレイ表示など、レイアウトの中で正確な位置指定が必要な要素の配置に活用できます。

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

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

  2. CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け

    CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置） デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置） 要素は通常の文書フロー内に