CSS ・ レイアウト

position

配置方法

要素の配置方法を指定します。top・left などと組み合わせて、要素をずらしたり、特定の位置に固定したりできます。

初期値
static
適用対象
すべての要素
継承
しない
01

サンプルコード

HTML
1<div class="card">
2 <span class="badge">NEW</span>
3 <p>春の新メニュー</p>
4</div>
CSS
1.card {
2 position: relative;
3 width: 240px;
4 padding: 24px 16px 12px;
5 border: 1px solid #ccc;
6}
7.badge {
8 position: absolute;
9 top: -10px;
10 left: 12px;
11 padding: 2px 8px;
12 background: #c0392b;
13 color: #fff;
14 font-size: 12px;
15}
02

実行結果

ブラウザでの表示
03

解説

position は、要素をどのように配置するかを決めるプロパティです。static 以外を指定すると、top・right・bottom・left で位置を調整できます。

absolute は、static 以外の position が指定された直近の祖先要素（多くは relative の親）の左上を基準に配置します。上の例では親の .card に relative を指定し、その左上を基準にバッジを置いています。基準になる親が見つからないときは、ページの左上が基準になります。

fixed は画面の左上、sticky は親要素の左上が基準です。どちらもスクロールしても決まった位置に表示されますが、fixed は要素の高さがなくなり、sticky はなくならない点が違います（下の応用編を参照）。

04

応用例・注意点

指定できる値

値説明
static通常の配置（初期値。top などは効かない）
relative本来の位置から上下左右にずらす。absolute の基準点にもなる
absolutestatic 以外の親要素の左上を基準に配置。親がなければページの左上。元の場所は詰められる
fixed画面（ビューポート）の左上を基準に固定。要素の高さがなくなる
sticky親要素の中で、スクロールして指定位置に来たら貼り付く。高さはなくならない

スクロールしても上部に残るヘッダー

sticky を使うと、ヘッダーが画面上部に貼り付きます。

CSS
1.site-header {
2 position: sticky;
3 top: 0;
4 z-index: 10;
5 background: #fff;
6}

画面の下に固定するバナー

fixed で画面の下に固定します。本文の最後が隠れないよう、body の下に余白を空けておきます。

HTML
1<a class="line-banner" href="#">LINE で友だち追加する</a>
CSS
1.line-banner {
2 position: fixed;
3 left: 0;
4 bottom: 0;
5 width: 100%;
6 padding: 16px;
7 background: #06c755;
8 color: #fff;
9 text-align: center;
10}
11body {
12 padding-bottom: 56px;
13}

注意点

  1. 01absolute の基準になる親に position: relative を付け忘れると、思わぬ位置に表示されます。
  2. 02absolute や fixed の要素は通常の流れから外れるため、ほかの要素と重なることがあります。
  3. 03fixed の要素は高さがなくなるため、下の要素が上に詰まって隠れることがあります。固定ヘッダーなら body に padding-top を付けて、ヘッダーの高さ分を空けておきます。
  4. 04sticky は親要素の中でしか貼り付きません。親の高さが sticky の要素と同じだと、動く余地がなく効かないように見えます。
05

relative・absolute・fixed・sticky のくわしい使い方

relative：本来の位置からずらす／absolute の基準点を作る

relative は、コンテンツが本来表示される位置から上下左右に移動させます。もう1つの大事な役割が absolute の起点（基準点）を作る ことです。親要素に relative を指定すると、子要素は親要素を基準に位置を調整できるようになります。

例1：relative で本来の位置からずらす

点線の枠が本来の位置です。relative でずらしても、元の場所は空いたまま残ります。

HTML
1<div class="wrapper">
2 <div class="ghost"></div>
3 <div class="item">.item</div>
4</div>
CSS
1.wrapper {
2 position: relative;
3 height: 110px;
4 padding: 12px;
5 background: #3a93c8;
6}
7.ghost {
8 position: absolute;
9 width: 120px;
10 height: 60px;
11 border: 2px dashed #fff;
12}
13.item {
14 position: relative;
15 top: 20px;
16 left: 40px;
17 width: 120px;
18 height: 60px;
19 padding: 6px;
20 background: #7fb24a;
21 color: #fff;
22 font-size: 12px;
23}
ブラウザでの表示

コードと表示の対応

  1. position: relative;本来の位置を基準にします。
  2. top: 20px; left: 40px;本来の位置から、上を20px・左を40px空けた位置（下と右）にずれます。

absolute：static 以外の親要素を起点に移動する

absolute は、static 以外（多くは relative）を指定した親要素の左上を起点に移動します。relative を指定した要素が見つからない場合は、ページの左上が基準 になります。

例2：relative の親の左上を基準にする

スライドと同じ指定です。.wrapper の左上から、左に100px・上に200px の位置に .item が置かれます。

HTML
1<div class="wrapper">
2 .wrapper
3 <div class="item">.item</div>
4</div>
CSS
1.wrapper {
2 position: relative;
3 height: 300px;
4 padding: 6px 10px;
5 background: #3a93c8;
6 color: #fff;
7 font-size: 12px;
8}
9.item {
10 position: absolute;
11 left: 100px;
12 top: 200px;
13 width: 140px;
14 height: 70px;
15 padding: 6px;
16 background: #7fb24a;
17}
ブラウザでの表示

コードと表示の対応

  1. .wrapper { position: relative; }親要素が absolute の基準点になります。
  2. left: 100px; top: 200px;親の左端から100px、上端から200pxの位置に、子要素の左上がそろいます。

例3：relative の親がないとき

例2から .wrapper の position: relative を消すと、.item はページの左上を基準に配置され、.wrapper の外にはみ出します。

HTML
1<div class="wrapper">
2 .wrapper（relative なし）
3 <div class="item">.item</div>
4</div>
CSS
1body {
2 margin: 0;
3}
4.wrapper {
5 margin: 60px 0 0 120px;
6 height: 80px;
7 padding: 6px 10px;
8 background: #3a93c8;
9 color: #fff;
10 font-size: 12px;
11}
12.item {
13 position: absolute;
14 left: 0;
15 top: 0;
16 width: 100px;
17 height: 40px;
18 padding: 6px;
19 background: #7fb24a;
20}
ブラウザでの表示

コードと表示の対応

  1. .wrapper { margin: 60px 0 0 120px; }.wrapper には relative がないので、基準になりません。
  2. left: 0; top: 0;基準がページの左上になるため、.item は画面の左上の角に表示されます。

fixed：画面の決まった位置に固定する

fixed は、画面の決まった位置に要素を固定 させたいときに使います。基準は画面（ビューポート）の左上で、スクロールしても同じ場所に表示され続けます。サイト上部に固定されるヘッダーや、スマートフォンで画面の下に出続ける「LINE 友だち追加」のようなバナーがこれにあたります。

sticky：親要素の中で決まった位置に固定する

sticky は、親要素の中で決まった位置に要素を固定 させたいときに使います。relative（基準点）の設定は必要ありません。親要素の範囲内でだけ貼り付き、親要素が画面から出ていくと一緒に流れていきます。サイドバー（メニュー）や、追従する広告バナーなどに使うことが多いです。

例4：枠の中でスクロールしてみる

枠の中をスクロールすると、左のメニューが上に貼り付いたまま付いてきます。

HTML
1<div class="scroll">
2 <div class="layout">
3 <nav class="side">メニュー</nav>
4 <div class="main">本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文</div>
5 </div>
6</div>
CSS
1.scroll {
2 height: 160px;
3 overflow: auto;
4 border: 1px solid #aaa;
5}
6.layout {
7 display: flex;
8 align-items: flex-start;
9 gap: 10px;
10 padding: 10px;
11}
12.side {
13 position: sticky;
14 left: 0;
15 top: 0;
16 width: 90px;
17 padding: 10px;
18 background: #b68235;
19 color: #fff;
20 font-size: 12px;
21}
22.main {
23 flex: 1;
24 font-size: 12px;
25 line-height: 1.8;
26}
ブラウザでの表示

コードと表示の対応

  1. position: sticky; left: 0; top: 0;スクロールして上端に届いたところで貼り付きます。
  2. align-items: flex-start;Flexbox の中では子要素が親の高さまで伸びるため、伸びないようにしておきます。伸びると貼り付く余地がなくなり、sticky が効きません。

fixed と sticky の違い

fixedsticky
基準画面の左上親要素の左上
要素の高さなくなるため、下にある要素がその分だけ上に詰まって配置されるなくならない（元の場所を占めたまま）
relative の設定不要不要
よく使う場面固定ヘッダー、画面下の追従バナーサイドバー、追従する広告バナー、表の見出し

例5：fixed は高さがなくなる

fixed のヘッダーは高さがなくなるので、本文の1行目が上に詰まり、ヘッダーの下に潜り込んで隠れています。

HTML
1<header class="fixed">fixed のヘッダー</header>
2<p>本文の1行目（ヘッダーに隠れている）</p>
3<p>本文の2行目</p>
CSS
1body {
2 margin: 0;
3}
4.fixed {
5 position: fixed;
6 top: 0;
7 left: 0;
8 width: 100%;
9 padding: 12px;
10 background: rgba(182, 130, 53, 0.9);
11 color: #fff;
12 font-size: 13px;
13}
14p {
15 margin: 8px 12px;
16 font-size: 13px;
17}
ブラウザでの表示

コードと表示の対応

  1. position: fixed;ヘッダーの高さがなくなるので、本文の1行目が上に詰まってヘッダーの下に隠れます。
  2. （対策）body { padding-top: ヘッダーの高さ; }fixed のヘッダーを使うときは、本文の上にヘッダーの高さ分の余白を空けておきます。sticky ならこの対策は要りません。
06

関連項目

↑↓ 選択Enter 移動Esc 閉じるCtrl K⌘K で開閉