開発 2024.02.19

【CSS】position: absolute;の使い方とエラーの対処法

CSSのposition: absolute;を使いこなす方法についてのガイドです。このプロパティを理解し、適切に使うことで、Webページ上で要素を精密に配置できます。しかし、position: absolute;を使用する際には、いくつか注意すべき点があります。
この記事では、position: absolute;の基本的な使い方から、想定した位置に要素を配置できない場合の対処法まで、初心者の方にも理解しやすいように解説します。

1 position: absolute; の基本
- 1.1 基本的な使い方
2 中央配置の設定方法
3 デモ
4 よくあるエラー
5 まとめ

position: absolute; の基本

position: absolute;を使うと、要素を通常の配置から外して、ページ上の指定した位置（絶対位置）に配置できます。この位置は、最も近い位置指定された祖先要素（positionがstatic以外に設定されている要素）に対して相対的です。position: absolute;を持つ要素は、top、right、bottom、leftプロパティを使って具体的な位置を指定します。

基本的な使い方

まずは、position: absolute;を使って、親要素内で子要素を特定の位置に配置する基本的な例を見てみましょう。

HTML:

<div class="container">
    <p>.containerにはposition: relative;をかけています。</p>
    <div class="positioned-element"><p>position: absolute;の要素です。</p></div>
</div>

CSS:

/* 親要素 */
.container { 
    position: relative; /* 基準となる位置を.containerにする */
    width: 500px;
    height: 500px;
    background-color: lightblue;
}

/* 子要素 */
.positioned-element { 
    position: absolute; /* .containerを基準に絶対位置を決める */
    top: 50px; /* 親要素の外側（上辺）より50px内側 */
    left: 50px; /* 親要素の外側（左辺）より50px内側 */
    width: 100px;
    height: 100px;
    background-color: coral;
}

この例では、親要素の.containerにposition: relative;が設定されているので、.containerの位置を基準にして.positioned-elementが相対的に定められています。
.positioned-elementにposition: absolute;とtop: 50px; left: 50px;を設定されているので、親要素.containerの左上から要素の内側に50pxの位置に配置されます。

中央配置の設定方法

次に、position: absolute;を使用して要素を親要素の中央に配置する方法を見てみましょう。
HTMLは「基本的な使い方」と同じものを使います。

中央配置をする方法

margin: auto;を使うやり方

top、right、bottom、leftプロパティをすべて0に設定し、margin: auto;を使う方法があります。

CSS：

.container {
    position: relative; /* 基準となる位置を.containerにする */
    width: 500px;
    height: 500px;
    background-color: lightblue;
}

.positioned-element {
    position: absolute;
    top: 0; /* 親要素の外側（上辺）から0px内側 */
    right: 0; /* 親要素の外側（右辺）から0px内側 */
    bottom: 0; /* 親要素の外側（下辺）から0px内側 */
    left: 0; /* 親要素の外側（左辺）から0px内側 */
    margin: auto; /* 必要 */
    width: 100px;
    height: 100px;
    background-color: coral;
}

transformを使うやり方

position: absolute; で浮かせる子要素にwidthやheightがないと、margin: auto;を使うやり方ではうまく中央寄せができないことがあります。
その場合はtransform: translate(-50%, -50%);を使う方法が有効です。

CSS：

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: lightblue;
}

.positioned-element {
    position: absolute;
    top: 50%; /* 親要素の外側（上辺）から50%内側 */
    left: 50%; /* 親要素の外側（左辺）から50%内側 */
    transform: translate(-50%, -50%); /* 要素の位置を-50%上・-50%左に変える */
    background-color: coral;
}

ただ、この方法では今度はテキストの改行が想定したものとは変わってしまったり、画像のサイズが変わってしまったりする場合があります。
その際にはwidth: 100%;を追加し、text-align: center;やmargin: auto;を加えるとうまくいく場合が多いのでお試しください。

上下のみ中央に配置をする方法

margin: auto;を使うやり方

top、bottomプロパティを0に設定し、margin: auto;を使う方法があります。

CSS：

.container {
    position: relative; /* 基準となる位置を.containerにする */
    width: 500px;
    height: 500px;
    background-color: lightblue;
}

.positioned-element {
    position: absolute;
    top: 0; /* 親要素の外側（上辺）から0px内側 */
    bottom: 0; /* 親要素の外側（下辺）から0px内側 */
    margin: auto 0; /* 上下のmarginはautoである必要がある */
    width: 100px;
    height: 100px;
    background-color: coral;
}

transformを使うやり方

上から-50%の位置にくればいいので、transform: translateY(-50%);を使います。

CSS：

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: lightblue;
}

.positioned-element {
    position: absolute;
    top: 50%; /* 親要素の外側（上辺）から50%内側 */
    left: 0;
    transform: translateY(-50%); /* 要素の位置をY軸方向に-50%変える */
    background-color: coral;
}

左右のみ中央に配置をする方法

margin: auto;を使うやり方

top、bottomプロパティを0に設定し、margin: auto;を使う方法があります。

CSS：

.container {
    position: relative; /* 基準となる位置を.containerにする */
    width: 500px;
    height: 500px;
    background-color: lightblue;
}

.positioned-element {
    position: absolute;
    top: 0; /* 親要素の外側（上辺）から0px内側 */
    bottom: 0; /* 親要素の外側（下辺）から0px内側 */
    margin: 0 auto; /* 上下のmarginはautoである必要がある */
    width: 100px;
    height: 100px;
    background-color: coral;
}

transformを使うやり方

左から-50%の位置にくればいいので、今度はtransform: translateX(-50%);を使います。

CSS：

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: lightblue;
}

.positioned-element {
    position: absolute;
    top: 0;
    left: 50%; /* 親要素の外側（左辺）から50%内側 */
    transform: translateX(-50%); /* 要素の位置をX軸方向に-50%変える */
    background-color: coral;
}

デモ

都合により少しクラス名など変わっていますが、こちらがデモです。

See the Pen
position: absolute;の中央配置 by GROWORKS (@groworks)
on CodePen.

右上のEDIT ON CODEPENをクリックすると全画面で見ることができます。

よくあるエラー

position: absolute;を入れたら要素が画面から消えてしまった！
親要素にposition: relative;が入っているか確認してみましょう。
position: absolute;を使った要素は、最も近い位置指定された祖先要素に対して相対的に配置されます。しかし、そのような祖先要素が存在しない場合、要素はページの<body>に対して相対的に配置されます。これが意図しない位置に要素が出現する原因となることがあります。
想定と少し違う位置になってしまう！
top、right、bottom、leftを使って絶対位置を指定しますが、これらのCSSが期待通りに機能しない場合は親要素にposition: relative;（absolute; 、fixed; も可）が設定されていないことが原因であることが多いです。
また、親要素に余分なpaddingは入っていないか確認しましょう。
擬似要素がposition:absolute;で出てこない！
親要素にpositionは入っているか、また擬似要素にcontent: “”; が入っているか確認しましょう。

まとめ

position: absolute;はとても便利ですが、正しく使用するには理解と慎重な調整が必要です。
親要素の設定を適切に行い、位置指定プロパティを正確に使用することで、想定通りのレイアウトを実現できます。
問題が発生した場合は、基準となる親要素の位置指定や、適用されているCSSプロパティを再確認しましょう。この記事がposition: absolute;を使いこなすための一助となれば幸いです。