position: absolute; で位置を指定する方法【CSS】

positionプロパティは要素の配置方法を指定するために使用されます。

この記事では、positionプロパティの値一つである「absolute」について解説します。

使いこなせば要素の配置方法を自由に制御することができるため、ウェブページのデザインにおいて非常に便利です。

position: absolute;とは何か？
position: absolute;の具体的な使い方
1. relativeとabsoluteの併用について
2. position: absolute;の使いどころ
まとめ

position: absolute;とは何か？

「position: absolute;」は要素の位置を絶対的な位置に配置するためのプロパティです。

このプロパティを指定すると、要素は通常のページフローから抜け出し、指定された位置に配置されます。

CSSの実践的な設計方法や最新の機能、ウェブページのデザインを学べるCSS学習本を使うことで、さらに理解を深めることができます。

>>【業界最高ランク参考書】CSSのテクニカルガイド３選【必読】<<

CSSの必読級参考書３選【初心者向け】

CSSは、Webページのデザインやスタイルを指定するための言語です。HTMLと組み合わせて使われることが多く、Web開発において欠かせない技術となっています。最近はネットで学べるサービスに溢れていますが、中級者や上級者へ向けとなると書籍が...

position: absolute;の具体的な使い方

position: absolute;を使うためには、まず対象となる要素に適用します。

例えば、以下のようなコードを書くことでposition: absolute;を適用できます

.example {
  position: absolute;
  top: 50px;
  left: 50px;
}

このようにすることで、.exampleというクラス名がつけられた要素に対してposition: absolute;が適用されます。

この場合、基準は一番外側の要素（通常はbody要素）になり、absoluteが指定された要素は{top: 50px; left: 50px}ずれた位置に移動します。

top,leftで配置をピクセル単位で指定する方法
z-indexで他要素との重なり合いを指定する方法

これらは「position: relative;」の記事で同じ説明をしていますので、詳しく知りたい人は読んで見てください。

>>【CSS】position: relative;で位置を指定する方法を解説【簡単】<<

position: relative;で位置を指定する方法【CSS】

CSSはWebページの見た目を装飾するためのスタイルシート言語です。その中でもpositionプロパティは要素の配置方法を指定するために使用されます。本記事ではその中でもrelativeという値に焦点を当てて解説します。 positio...

relativeとabsoluteの併用について

親要素に「position; relative;」を指定することで、基準を指定することができます。

以下のコードが実際に良く使われる方法になります。

<div class="parent">
  <div class="child">
    Absolute Positioning
  </div>
</div>

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

See the Pen how about [position: absolute] by うるふ (@ijsmckdt-the-animator) on CodePen.

上記のコードでは、親要素である「.parent」クラスに「position: relative;」が指定されています。そして、子要素である「.child」クラスに「position: absolute;」が指定され、さらに「top」「left」プロパティを使用して要素の配置位置が指定されています。

この場合、子要素は親要素の左上から50px下と50px右に配置されます。親要素の位置に関係なく、指定した位置に要素を配置することができます。

position: absolute;の使いどころ

ヘッダーやフッターの配置: ウェブページのヘッダーやフッターは、通常のページフローから抜け出して配置されることが多いです。position: absolute;を使用することで、自由に位置を指定することができます。
オーバーレイ要素の表示: ポップアップウィンドウやモーダルなどのオーバーレイ要素は、position: absolute;を使用して通常のページ要素の上に表示されるように配置されます。
タイトルやキャプションの配置: イメージやビデオの上にタイトルやキャプションを表示する場合、position: absolute;を使用して画像の上に重ねて配置することができます。

うるふ

position: absolute;を使用する際には、適切な親要素の指定や配置位置の微調整に注意が必要です。

要素の重なりや表示位置が意図しない結果にならないように、慎重に設定しましょう。

まとめ

今回の解説を通じて、position: absolute;の基本的な使い方を理解できたでしょうか？

位置の基準は親要素: position: absolute;を指定した要素は、その直近の「position: relative;」が指定された親要素を基準として位置が計算される。もし親要素に「position: relative;」が指定されていない場合、一番外側の要素（通常はbody要素）が基準となる。
通常のページフローから抜け出す: position: absolute;を指定した要素は、通常のページフローから抜け出す。そのため、他の要素と重なったり、他の要素がその位置を認識しないことがある。
上下左右の位置指定: 「top」「right」「bottom」「left」プロパティを使用して、要素の位置を指定する。

「position: absolute;」はCSSの中でも重要なプロパティの一つです。

要素の配置方法を自由に制御することができるため、ウェブページのデザインにおいて非常に便利です。

ただし、適切な親要素の指定や配置位置の調整に注意が必要なことを覚えておきましょう。