CSSのposition:absolute;を解説！概要から使い方まで紹介
Webデザインで要素を自由に配置したいときによく使われるのが、CSSの「position:absolute;」。
これはテキストや画像を好きな場所に置いたり、説明文を写真の上に重ねたりと、表現の幅を広げられる便利なプロパティです。
ただし、使い方を誤ると意図しない位置に表示されてしまうこともあるため、基本的な仕組みや指定方法を正しく理解することが大切です。
この記事では、absoluteの概要から使い方、レイアウト例や注意点まで初心者向けに解説します。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSのposition:absolute;とは？
CSSのpositionプロパティは、要素をページ内でどのように配置するかを指定するために使います。
その中でabsoluteを指定すると、要素は通常の文書の流れから外れて配置され、親要素（または一番近いposition指定のある要素）を基準に自由な位置へ動かせるようになります。
これにより、画像に文字を重ねたり、ボタンを特定の場所に固定したりといったレイアウトが可能になります。
通常の「流れに従った配置」ではできない、デザイン性の高い表現を作るときに便利です。
たとえば、本ブログのヘッダー画像に「このテキストはabsoluteで画像に重ねています」という文字を乗せると、以下のように表示されます。
使用例は次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position:absolute サンプル</title>
<link rel="stylesheet" href="dmmsample.css">
</head>
<body>
<div class="container">
<img src="dmmimg.png" alt="" class="image">
<p class="caption">このテキストはabsoluteで画像に重ねています</p>
</div>
</body>
</html>
.container {
position: relative; /* absoluteの基準にするため */
display: inline-block;
}
.image {
width: 400px;
height: auto;
display: block;
}
.caption {
position: absolute; /* 通常の配置から外す */
bottom: 10px; /* 下から10px */
right: 10px; /* 右から10px */
background: rgba(0, 0, 0, 0.6); /* 半透明の背景 */
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
}
CSSのposition:absolute;を使った指定方法
ここでは、CSSのposition:absolute;を使った指定方法についてご紹介します。
基本の指定方法
「position:absolute;」は、要素を通常の文書の流れから外して配置する指定方法です。
基準となるのは「一番近いposition: relative;が設定された親要素」で、なければbodyが基準になります。
たとえば以下の指定を行うと、その要素は通常のレイアウトから切り離され、bottomやlightなどを用いて自由に位置を動かせるようになります。
.box {
position: absolute;
bottom: 10px
right: 10px;
}結果：
位置の指定方法（top,bottom,left,right）
absoluteを使うときは、top・bottom・left・rightを組み合わせて位置を指定します。
たとえば左上に配置する際は以下のコードになります。
.caption {
position: absolute;
top: 10px;
left: 10px;
}
また、中央に配置する際のコードは以下です。
.caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
他の指定方法（relative,fixed,static）
absolute以外の指定方法も見てみましょう。
relativeを使う場合、以下のようになります。
.caption {
position: relative;
top: 20px;
left: 20px;
}
relativeは「本来の位置を基準にずらす」指定です。
文書の流れには残るので、他の要素がその下に配置される点が absolute と違います。
次に紹介するfixedは、「ブラウザ画面全体」を基準に固定します。
スクロールしても動かず、常に同じ位置に表示されるのが特徴です。
.caption {
position: fixed;
bottom: 10px;
right: 10px;
}
そしてstatic（デフォルト）は、「標準の配置方法」で、特別な位置指定をしないときの状態です。
.caption {
position: static;
}
特に位置指定はされず、画像の下に通常のテキストとして表示されます。
CSSのposition:absolute;を使ったレイアウト例
ここでは、CSSのposition:absolute;を使ったレイアウト例を紹介します。
レイアウト①画像に説明文を重ねる
写真や商品画像の上に説明文を重ねる定番レイアウトです。
<div class="container">
<img src="sample.jpg" alt="商品画像" class="image">
<p class="caption">限定セール中！</p>
</div>.container {
position: relative;
display: inline-block;
}
.image {
width: 300px;
}
.caption {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,0.6);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
}
レイアウト②ロゴを中央に配置する
背景画像や大きなコンテンツの中央にロゴやテキストを置くレイアウトです。
<div class="hero">
<img src="dmmimg3.jpg" alt="背景画像" class="bg">
<h1 class="logo">My Brand</h1>
</div>.hero {
position: relative;
width: 500px;
height: 500px;
}
.bg {
width: 100%;
height: 100%;
object-fit: cover;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
背景画像の中央に白文字のロゴ「My Brand」が配置されます。
もちろん文字だけでなく、ロゴ画像を表示することも可能です。
レイアウト③枠をデザインする
ボックスの上下左右に「装飾枠」をabsoluteで配置して、デザイン性を高める方法です。
<div class="card">
<p>このボックスには装飾枠があります</p>
<div class="border top"></div>
<div class="border bottom"></div>
</div>.card {
position: relative;
width: 300px;
padding: 20px;
border: 1px solid #ccc;
margin: 30px;
}
.border {
position: absolute;
height: 5px;
width: 100%;
background: #4CAF50;
}
.border.top {
top: 0;
left: 0;
}
.border.bottom {
bottom: 0;
left: 0;
}
ボックスの上端と下端に緑のラインが重なり、デザイン性のある枠になります。
CSSのposition:absolute;を使うポイントや注意点
ここでは、CSSのposition:absolute;を使うポイントや注意点について書いていきます。
起点を意識する
absoluteで配置する場合、基準となるのは「最も近いposition: relative;を持つ親要素」です。
親に指定がなければbodyが基準になるため、思わぬ位置に表示されることがあります。
必ず「どの要素を基準にするか」を意識して、必要なら親要素にposition: relative;を指定しましょう。
場面によって使い分ける
absoluteは文書の流れから外れるため、他の要素を押し下げたりズラしたりせず、重ねて配置できます。
この特性は、
- 画像の上にキャプションを載せる
- アイコンを隅に固定する
- バッジを商品画像に重ねる
といったデザインで力を発揮します。
逆に通常のレイアウト調整には向かないため、装飾や強調など「ほかの要素に影響を与えずに置きたい場面」で活用するのが効果的です。
レスポンシブデザインに注意する
absoluteは指定した位置に固定されるため、画面幅が変わるスマホやタブレットでは意図せず要素がずれることがあります。
「%」や「transform: translate」を活用したり、メディアクエリで調整したりして、どのデバイスでも見やすいレイアウトになるよう工夫する必要があります。
まとめ
「position:absolute;」は、画像にテキストを重ねたり、ロゴを中央に配置したりと自由度の高いレイアウトを実現できる便利なプロパティです。
ただし、基準となる要素やレスポンシブ対応を意識しないと、思わぬ表示崩れにつながることもあります。
特性を正しく理解し、場面に応じて効果的に使うことが大切です。
より実践的にCSSやレイアウトスキルを身につけたい方には、DMM WEBCAMPのフロントエンドコースがおすすめです。
HTML/CSSやJavaScriptの基礎から、モダンなフロントエンド技術まで体系的に学べ、現役エンジニアのサポートを受けながらスキルを実務レベルに引き上げられます。
学習と並行してポートフォリオ制作もできるため、転職や副業を目指す方にも最適な内容なので、ぜひこの機会に無料カウンセリングにお越しください！
