要素は通常の表示フローにしたがって配置されます。例えば、ブロックボックスの性質を持つボックスは前の要素の下に左を基準に配置される、といったようにです。しかし、positionプロパティを使うことで、要素は通常の表示フローから切り離され、自由な位置に配置することができるようになります。

これにより、別の要素に重ねて表示させたり、画面の決まった位置（ビューポートや親要素）に要素を固定させたり、スクロールに合わせて追従させたりするなど、柔軟なレイアウト制御ができるようになります。

positionプロパティとは

positionプロパティは、要素が基準となる位置からどのように配置されるかを指定するためのプロパティです。

positionプロパティに指定できる主な値です。

例えば、要素を通常の表示位置を基準にして相対的な位置に表示したいときには次のように指定します。

p {
    position: relative;
}

しかし、positionプロパティを指定するだけでは要素の位置を指定することができません。positionプロパティはあくまで、基準位置からの要素の配置方法を指定するためのプロパティです。要素を思うような位置に配置するには、positionプロパティと合わせて基準位置からの距離を指定するためのプロパティと一緒に使用します。

基準位置からの距離を指定するプロパティ

positionプロパティの値をstatic以外に指定すると、top、right、bottom、leftという基準位置からの距離を具体的な数値で指定するプロパティを使用できるようになります。

positionプロパティを使った要素の位置変更には、まずpositionプロパティで配置方法を指定してから、この4つのプロパティで具体的な数値を指定するという流れになります。

top・left・right・bottomプロパティの使い方

top、bottom、left、rightの4つのプロパティは、基準位置からの距離を指定するプロパティです。各プロパティは次の値を指定をするためのものです。

4つ全てを指定する必要はなく、topとleft、bottomとright、あるいはtopのみなどの組み合わせで必要なものだけを指定していきます。単位には「px」や「%」で指定することができ、指定しない場合は「top: 0」と「left: 0」が適用されます。規定値は「auto」ですので、値をリセットしたい場合にはautoを指定します。

p {
    position: relative;
    top: 10px;
    left: 10px;
}

positionプロパティの値

positionプロパティの値によってどのような配置指定ができるようになるのかを見ていきましょう。

値：static（規定値）

staticは規定値で、ブロックボックスの性質を持つ要素は通常のフロー（前の要素の下に配置され、特に指定がなければ親要素の横幅いっぱいに広がり、要素の前後には自動的に改行が入る）で配置されます。

値がstaticの場合、要素の位置はtop、left、right、bottomプロパティによって調整することができません。4つのプロパティは無効になっていますので、たとえこれらのプロパティに値を指定したとしても位置が変わることがありません。

次の例では、positionプロパティの値をstaticのままですので、topとleftプロパティを指定してもその値は無効で、要素の位置に変化はありません。

<div class="container">
    <p>要素１</p>
    <p class="position">要素２</p>
    <p>要素３</p>
</div>

p {
    margin: 0;
    padding: 10px;
    text-align: center;
    background-color: #0064ff;
    color: #ffffff;
}
.position {
    position: static; /* 規定値なので未設定でも同じ */
    top: 10px; /* staticではこのプロパティは無効 */
    left: 10px; /* staticではこのプロパティは無効 */
    background-color: #80b2ff;
}

値：relative

positionプロパティの値をrelativeにすると、通常の表示位置を基準とした相対的な位置に配置することができます。ただし、相対配置であっても、ドキュメントの通常のフローに留まる（通常の表示位置にサイズが保持される）ため、次の要素の配置に影響を与えます。自身の幅は指定がない限り、親要素の幅いっぱいに広がり、親の限界値を超えることはありません。

positionプロパティの値をrelativeにしただけでは、top、bottom、left、rightなどのプロパティを指定しなければstaticと同様に表示位置に変化はりません。値をrelativeにすることでtop、bottom、left、rightプロパティが有効になると考えたほうが良いでしょう。

次の例では、positionプロパティの値をrelativeに変更することで、topとleftプロパティの指定が有効になり、要素の位置が本来の表示位置から変更されました。

.position {
    position: relative; /* このプロパティの値を変更 */
    top: 10px; /* relativeでこのプロパティが有効になる */
    left: 10px; /* relativeでこのプロパティが有効になる */
    background-color: #80b2ff;
}

値：absolute

positionプロパティの値をabsoluteにすると、親要素の表示位置を基準に絶対的な位置を指定することができます。

absoluteでは、通常の表示フローから外れ周りの要素に影響を受けません。親要素に余白が入っている場合でも、親要素の基準位置からの配置になります。absoluteを指定された要素は他の要素への影響もなくなります。他の要素はあたかもその要素が存在しないかのように振る舞い、レイアウトされます。また、自身の幅も親要素一杯まで広がらず、中身のコンテンツの幅となります。

注意しなければならない点は、基準となるのはpositionプロパティがstaticではないもっとの近い親（祖先）要素であるということです。
親要素のどれにもpositionプロパティにrelative、absolute、fixedが指定されていなければ、最上位の親要素であるbody要素までさかのぼって、body要素を基準として配置されることになります。

次の例では、positionプロパティの値をabsoluteに変更することで、基準位置が変わります。親要素にはpositionプロパティを指定されたものはありませんのでこの要素に表示の基準は最上位の親要素であるbody要素になります。
親要素のdiv要素「container」に背景色をつけて、親要素との位置関係と基準位置をわかりやすくしています。

.container {
    padding: 20px;
    background-color: #eef2ff;
}
.position {
    position: absolute; /* このプロパティの値を変更 */
    top: 0px; /* このプロパティの値を変更 */
    left: 0px; /* このプロパティの値を変更 */
    background-color: #80b2ff;
}

top、leftプロパティで指定されたとおり、body要素の左上を基準に表示されます。

先ほども述べたように、absoluteに指定された要素の基準位置は、positionプロパティの値がstaticではない最も近い親要素となります。基準位置を変更するために、親要素であるdiv要素「container」にposition: relativeを追加します。

.container {
    position: relative; /* このプロパティを追加 */
    padding: 20px;
    background-color: #eef2ff;
}

基準となる親要素が、 body要素から div要素「container」に変わっているのがわかります。

値：fixed

positionプロパティの値をfixedにすると、要素をウィンドウを基準とした絶対的な位置に配置することができます。指定された要素は画面に固定されスクロールしても位置は変りません。

<div class="fixed">要素１</div>

.fixed {
    position: fixed;
    top: 20px;
    left: 20px;
    padding: 10px;
    text-align: center;
    background-color: #0064ff;
    color: #ffffff;
}