CSSのpositionとは？positionを使った自由な位置の指定方法を解説！

【 2025/04/24 12:21 更新】

CSSのpositionとは？

CSSのpositionとは、要素の位置を指定できるCSSプロパティです。
positionをマスターするとWebページのデザインの幅がさらに広がります。

こじはなはヘッダーとか重要なボタンを固定するのによく使うよ！

CSSのpositionでできること

要素を指定の位置に固定できる。
要素をスクロールしたら指定の位置についこさせることができる。

positionのコードはこんな感じ

CSSでposition: (位置の種類);を指定し、topまたはbottom: (縦の位置の値)・leftまたはright: (横の位置の値)で位置を定義します。

【 position: absolute の例】

【 test.css 】


.position-absolute {
    width: 100px;
    height: 100px;
    background-color: pink;

    position: absolute;
    top: 30px;
    left: 100px;
}

【 HTMLファイル】


<div class="position-absolute">上30px<br>左100px</div>

ブラウザで実行するとこんな感じ

position位置決めプロパティtop/bottom/left/rightとは？

position位置決めプロパティtop/bottom/left/rightはそれぞれ以下の通りです。

top	基準において上から何サイズの位置かを指定できます。
bottom	基準において下から何サイズの位置かを指定できます。
left	基準において左から何サイズの位置かを指定できます。
right	基準において右から何サイズの位置かを指定できます。

ポイント

基準はpositionプロパティの値によって異なります。
各値の基準については次章で詳しく解説します。

positionプロパティの使い方

position: absolute

absoluteは、基準に対してtop/bottom/left/rightで指定した位置に固定できます。

【基準】

position: relative/absolute/fixedを指定した要素、かつ、自身を内包する要素で1番近い要素。
指定がない場合は、Webページの左上が基準。

【 position: absolute の例】

【 test.css 】


.position-absolute {
    width: 100px;
    height: 100px;
    background-color: pink;

    position: absolute;
    top: 0px;
    left: 0px;
}

.position-relative {
    width: 300px;
    height: 200px;
    margin: 150px;
    background-color: blue;

    position: relative;
}

【 HTMLファイル】


<div class="position-absolute">ページ左上<br>基準</div>
<div class="position-relative">
    <div class="position-absolute">relative基準</div>
</div>

ブラウザで実行するとこんな感じ

relative要素に内包されたabsolute要素は、基準がrelative要素になり、
親要素に何もないabsolute要素は基準が画面左上になりましたね！

※relativeについては次節で説明します。

position: relative

relativeは自身が基準と定義します。
自身が内包するposition: absoluteもしくはstickyの要素に対する基準として使われます。

【基準】

自身が基準。

【 position: relative の例】

【 test.css 】


.position-absolute {
    width: 100px;
    height: 100px;
    background-color: pink;

    position: absolute;
    top: 0px;
    left: 0px;
}

.position-relative {
    width: 300px;
    height: 200px;
    margin: 50px;
    background-color: blue;

    position: relative;
}

【 HTMLファイル】


<div class="position-relative">
    <div class="position-absolute">relative基準</div>
</div>

ブラウザで実行するとこんな感じ

relativeを基準に、absolute要素の位置が反映されています。

position: fixed

fixedは、基準に対してtop/bottom/left/rightで指定した位置に固定できます。
また、スクロールしても表示位置は常に固定されます。

【基準】

Webページの左上が基準。

【 position: fixed の例】

【 test.css 】


.position-fixed {
    width: 100px;
    height: 100px;
    background-color: pink;

    position: fixed;
    top: 50px;
    left: 80px;
}

.main {
    height: 200vh;
}

【 HTMLファイル】


<main class="main">
    <div class="position-fixed">fixed</div>
</main>

ブラウザで実行するとこんな感じです。

実際にスクロールしてみてください！

スクロールをしても常に「top: 50px」・「left: 80px」の位置に表示されています。

position: sticky

stickyは、基準に対してtop/bottom/left/rightで指定した位置に固定できます。
sticky要素が存在する位置までスクロールした際、指定した位置に固定でスクロールに追従します。

【基準】

スクロールが発生する要素、かつ、自身を内包する要素で1番近い要素が基準。

【 position: sticky の例】

【 test.css 】


.position-sticky {
    width: 100px;
    height: 100px;
    background-color: pink;

    position: sticky;
    top: 50px;
    left: 0px;
}
.block01 {
    height: 150px;
    width: 100%;
    background-color: aqua;
}
.block02 {
    height: 200vh;
    width: 100%;
    background-color: beige;
}

【 HTMLファイル】


<div class="block01">block01</div>
<div class="position-sticky">sticky</div>
<div class="block02">block02</div>

ブラウザで実行するとこんな感じ

実際にスクロールしてみてください！

sticky要素がある位置までスクロールすると、「top:50px」の位置で追従してきました。

position: static (デフォルト)

staticはtop/bottom/left/rightで指定した位置やその他関係プロパティが一切効かない要素。
デフォルトの要素の状態です。

【 position: static の例】

【 test.css 】


.position-static {
    height: 200px;
    width: 200px;
    background-color: pink;

    position: static;
    top: 100px;
    left: 100px;
}

【 HTMLファイル】


<div class="position-static">static</div>

ブラウザで実行するとこんな感じ

top/leftが一切効いていません。

その他position指定によく使うプロパティ/テクニック

z-indexプロパティ

z-indexプロパティはposition要素同士の重なり順を指定できます。
また、値は整数を設定し、大きいほど前面へ表示されます。

デフォルトは"auto"で親要素と同じレベルとなります。

〜デフォルト"auto"の表示〜

【 z-indexを指定したサンプルコード】

【 test.css 】


.block {
    width: 100px;
    height: 100px;
}

.absolute01 {
    background-color: pink;

    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
}
.absolute02 {
    background-color: beige;

    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 2;
}
.absolute03 {
    background-color: aqua;

    position: absolute;
    top: 150px;
    left: 150px;
}

【 HTMLファイル】


<div class="block absolute01">absolute01<br>z-index: 1</div>
<div class="block absolute02">absolute02<br>z-index: 2</div>
<div class="block absolute03">absolute03</div>

ブラウザで実行するとこんな感じ

z-indexの値が大きいほど前面へ表示されました。

absolute/fixedで全方向の中央寄せ

absolute/fixedを指定した要素を垂直・水平方向に中央寄せができます。

【 test.css 】


.absolute {
    width: 100px;
    height: 100px;
    background-color: pink;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

【 HTMLファイル】


<div class="absolute">absolute</div>

ブラウザで実行するとこんな感じ

左右・上下どちらも中央の位置となりました。

flexボックスで中央寄せも可能

flexボックスでも全方向中央寄せができます。
ただ画面全体に対して中央に寄せたい場合、高さheightの指定に手間取りやすいです。

【 test.css 】


.flex-center {
    display: flex;
    height: 90vh;
    justify-content: center;
    align-items: center;
}
.block {
    width: 100px;
    height: 100px;
    background-color: pink;
}

【 HTMLファイル】


<div class="flex-center">
    <div class="block">block</div>
</div>

【 flexについて詳しく】

CSSのflexとは？Web画面必須なflexの基本的な使い方を詳しく解説！｜こじはなNote

absolute/fixedで左右・水平方向のみ中央寄せ

absolute/fixedを指定した要素を左右・水平方向に中央寄せができます。

【 test.css 】


.absolute {
    width: 100px;
    height: 100px;
    background-color: pink;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

【 HTMLファイル】


<div class="absolute">absolute</div>

ブラウザで実行するとこんな感じ

左右のみ中央の位置となりました。

flexボックスで左右の中央寄せ可能

flexボックスでも左右の中央寄せができます。

【 test.css 】


.flex-center {
    display: flex;
    justify-content: center;
}
.block {
    width: 100px;
    height: 100px;
    background-color: pink;
}

【 HTMLファイル】


<div class="flex-center">
    <div class="block">block</div>
</div>

【 flexについて詳しく】

CSSのflexとは？Web画面必須なflexの基本的な使い方を詳しく解説！｜こじはなNote

absolute/fixedで上下・垂直方向のみ中央寄せ

absolute/fixedを指定した要素を上下・垂直方向に中央寄せができます。

【 test.css 】


.absolute {
    width: 100px;
    height: 100px;
    background-color: pink;

    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

【 HTMLファイル】


<div class="absolute">absolute</div>

ブラウザで実行するとこんな感じ

上下のみ中央の位置となりました。

flexボックスで上下の中央寄せも可能

flexボックスでも上下の中央寄せができます。
ただ画面全体に対して中央に寄せたい場合、高さheightの指定に手間取りやすいです。

【 test.css 】


.flex-center {
    display: flex;
    height: 90vh;
    align-items: center;
}
.block {
    width: 100px;
    height: 100px;
    background-color: pink;
}

【 HTMLファイル】


<div class="flex-center">
    <div class="block">block</div>
</div>

【 flexについて詳しく】

CSSのflexとは？Web画面必須なflexの基本的な使い方を詳しく解説！｜こじはなNote

まとめ

CSSのpositionは要素の位置を指定できるCSSプロパティで、指定の位置に固定・スクロールしたら指定の位置についこさせることができる。
position指定要素の位置決めプロパティとしてtop/bottom/left/rightプロパティがあり、基準をもとにした位置となる。
topプロパティ：基準において上から何サイズの位置かを指定できる。
bottomプロパティ：基準において下から何サイズの位置かを指定できる。
leftプロパティ：基準において左から何サイズの位置かを指定できる。
rightプロパティ：基準において右から何サイズの位置かを指定できる。
「position: absolute」：基準に対してtop/bottom/left/rightで指定した位置に固定できる。
absoluteの基準：「position: relative/absolute/fixedを指定した要素、かつ、自身を内包する要素で1番近い要素」また、指定がない場合は「Webページの左上」が基準。
「position: relative」：自身が内包するposition: absoluteもしくはstickyの要素に対する基準となる。
relativeの基準：「自身」が基準。
「position: fixed」：基準に対してtop/bottom/left/rightで指定した位置に固定でき、スクロールしても表示位置は常に固定される。
fixedの基準：「Webページの左上」が基準。
「position: sticky」：基準に対してtop/bottom/left/rightで指定した位置に固定でき、sticky要素が存在する位置までスクロールした際、指定した位置に固定でスクロールに追従する。
stickyの基準：「スクロールが発生する要素、かつ、自身を内包する要素で1番近い要素」が基準。
staticの基準：「自身」が基準。
「position: static」：top/bottom/left/rightで指定した位置やその他関係プロパティが一切効かないデフォルト要素。
z-indexプロパティ：position要素同士の重なり順を指定でき、値の整数が大きいほど前面へ表示される。
position指定要素を中央寄せ：absolute/fixedの要素については全方向/垂直方向/水平方向の中央寄せができる。

【 2025/04/24 12:21 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！