position:absolute;を使いこなす！初心者必見の使い方と実例を解説

absoluteとrelativeの関係って？
基準にする親要素はどこ？
position:absolute;が効かない

なんとなく勉強をしてしまって、思うようなコーディングができずに悩んでいませんか？

本記事では、基本的な使い方からサンプルコード、初心者が躓きやすいポイントを紹介します。

1. position:absolute;とは？
2. position:absolute;の使い方
- 2.1. 位置の指定方法
- 2.2. 頻出する配置方法
3. position:absolute;を使用したコーディング例
4. position:absolute;でよくある困った事例の対処方法
5. まとめ：position:absolute;の基礎を理解しよう
6. 未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！

position:absolute;とは？

positionはどこに要素を配置するか設定するCSSのプロパティ。absoluteはいくつかあるpositionの値の一つで絶対的な位置を指定でき、好きな場所に要素を動かせる絶対配置ができます。

起点となる場所を決めて、そこからどれだけ離れているか、position:absolute;で設定すると、他の要素が間にあったとしても指定した位置に収まります。

以下に通常ボックスとposition:absolute;を使用した絶対位置ボックスを作成しました。それぞれの動きを確認してみましょう。

.container {
position: relative;
width: 500px;
height: 300px;
border: 2px solid #333;
}
.normal-box {
width: 100px;
height: 100px;
background-color: #b2cbe4;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.absolute-box {
position: absolute;
top: 20px;
left: 80px;
width: 100px;
height: 100px;
background-color: #f08080;
display: flex;
align-items: center;
justify-content: center;
}

containerという大きなボックスがnormal-boxの通常ボックスとabsolute-boxの絶対位置ボックスの親要素に指定しており、2つのボックスは中に配置されています。

場所の指定をしていない通常ボックスは左側、絶対位置ボックスはcontainerの上から20pixel、左から80pixelの場所を指定しており、絶対配置されています。

絶対配置はピタッと固定されるため他の要素に影響されず、常に指定した位置をキープ。通常ボックスと絶対位置ボックスの場所が被る部分は、重なって表示されています。

他のpositionの値
・static：初期値。配置を変えられず、z-indexの指定もできない。
・relative：相対位置。要素を配置する場所の起点になる。
・fixed：Web画面の指定した場所に要素を固定する。

position:absolute;の使い方

次にposition:absolute;の書き方を見ていきましょう。

位置の指定方法
頻出する配置方法

それぞれ順番に解説していきます。

位置の指定方法

位置の指定は、position:absolute;だけではできません。

起点にする場所にposition: relative;、もしくはposition: fixed;を配置するのがルールです。親要素となる場所を指定して、そこを起点にposition:absolute;で要素を配置します。

たとえば、前章の絶対位置ボックスではcontainerを起点にしてposition: relative;を指定、containerからどれだけ離れているかtopとleftで場所を決めています。

位置指定するコードは、以下の4つ。

top
bottom
left
right

それぞれ起点から要素がどれくらい離れているか、具体的な距離を示します。

親要素となる起点を指定して自由に要素を配置できるようになるとコーディングの幅が広がるため、しっかりと基礎をおさえておきましょう。

頻出する配置方法

実務で頻出する配置方法は、以下の3つ。

上下左右中央：「top:50%」「left:50%」「transform:translate(-50%,-50%)」
上下中央：「top:50%」「transform:translateY(-50%)」
左右中央：「left:50%」「transform:translateX(-50%)」

position:absolute;にプラスしてコードを書くと、期待した動きになります。

たとえば、要素を上下左右中央に動かしたいときは、以下のように記述します。

<div class=”container”>
<div class=”center-box”>上下左右中央</div>
</div>

.container {
position: relative;
width: 300px;
height: 300px;
background-color: #ccc;
}
.center-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #f08080;
text-align: center;
line-height: 100px;
}

要素を中央にするコーディングは、出番がたくさんあります。何度も使いまわして効率アップできるように、コードストックやエディタでスニペット登録がおすすめです。

transform:translate()とは？
CSSのtransformプロパティの一部で、要素をtranslate(x, y) の形で指定した方向に移動できます。pxや%で距離指定ができ、％の場合は要素自体の横幅や高さを基準にした相対値が適用されます。要素の位置調整が柔軟にできるほか、アニメーションの効果にも利用できる便利なプロパティです。

position:absolute;を使用したコーディング例

position:absolute;はボタンや見出し、ハンバーガーアイコンの実装など、あらゆるところで使用されています

ここでは、以下3つのコーディング例を紹介します。

左に画像、右側に見出し＋テキスト
見出し
ボタン

それぞれ順番に見ていきましょう。

左に画像、右側に見出し＋テキスト

<div class=”container”>
<img src=”/img/sample-img.png” alt=”Sample Image” class=”img”>
<div class=”text”>
<h2>見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>

.container {
position: relative;
width: 80%;
max-width: 800px;
height: 300px;
}
.img {
position: absolute;
top: 50%;
left: 0;
width: 40%;
height: auto;
transform: translateY(-50%);
}
.text {
position: absolute;
top: 50%;
right: 0;
width: 55%;
transform: translateY(-50%);
padding-left: 45%;
}
.text h2 {
margin-top: 0;
}
.text p {
margin-bottom: 0;
}

position: absolute; を使って画像を左側に、テキストを右側に配置するシンプルなレイアウトです。

親要素に大枠のcontainerを指定してposition: relative;で起点にし、imgとtextは親要素からどのくらい離れた位置に指定するかposition: absolute; で絶対位置を決めています。

このようなレイアウトもposition: absolute; で実装できます。ぜひ試してみてください。

見出し

.container {
position: relative;
width: 100%;
height: 100%;
}
.absolute-heading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
color: #333;
padding: 10px 20px;
text-align: center;
}
.absolute-heading::before,
.absolute-heading::after {
content: “”;
position: absolute;
top: 50%;
width: 100px;
height: 2px;
background-color: #333;
}
.absolute-heading::before {
left: -110px;
}
.absolute-heading::after {
right: -110px;
}

position: absolute; を使って見出しを中央に配置し、擬似要素（::before、::after）でラインを引いたおしゃれなデザインです。

親要素をcontainerとしてposition: relative; を設定し、子要素absolute-headingはposition: absolute;、親要素を起点に上下左右中央の配置を決めています。

擬似要素でライン装飾を実装して見出しの中央に配置するために、ここでもposition: absolute; で配置を指定しています。

ボタン

<div class=”container”>
<button class=”fixed-button”>右下に固定したボタン</button>
</div>

.container {
position: relative;
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.fixed-button {
position: absolute;
bottom: 10px;
right: 10px;
padding: 10px 20px;
background-color: #f08080;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.fixed-button:hover {
opacity: 0.7;
}

親要素containerの右下に固定したボタンのレイアウトです。

position: relative;をcontainerに指定し、子要素fixed-buttonにはposition: absolute;を使って右下に固定しています。

ボタンのレイアウトでも実務での使用例があるため、活用法を見ておいて損はないでしょう。