position

ポジション（レイアウトとボックスモデル）

意味要素の配置方法

positionとは？

positionプロパティは、要素の配置方法を指定するために使用します。主にstatic, relative, absolute, fixed, stickyの5つの値があり、それぞれ要素の配置を異なる方法で制御します。

positionの具体的な使い方

要素を絶対位置に配置する例

<style>
    div {
        position: absolute;
        top: 50px;
        left: 100px;
    }
</style>

<div>
    このdiv要素は特定の位置に配置されています。
</div>

div要素をページの左上から50ピクセル下、100ピクセル右の位置に絶対配置します。

スティッキー配置を設定する例

<style>
    .sticky {
        position: sticky;
        top: 0;
    }
</style>

<div class="sticky">
    このdiv要素はスクロール時に上部に固定されます。
</div>

スクロール時に要素を上部に固定するスティッキー配置を設定します。

positionに関するよくある質問

Q. position: staticとは何ですか？

A. position: staticは要素のデフォルトの配置方法で、通常のドキュメントフローに従って配置されます。top、right、bottom、left、z-indexプロパティの影響を受けません。

Q. position: relativeの特徴は？

A. position: relativeは要素を通常の位置から相対的に移動させます。元の位置を基準にtop、right、bottom、leftで調整でき、元のスペースは保持されます。

Q. position: absoluteの親要素とは？

A. position: absoluteの要素は、最も近い位置指定された祖先要素（static以外のposition値を持つ要素）を基準に配置されます。祖先に該当する要素がない場合は、初期包含ブロック（多くの場合はビューポート）が基準になります。

positionが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのpositionやbox-sizing、right、border-style、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。