CSS入門 | CSS位置プロパティ | Position

positionプロパティ

positionプロパティは、HTML要素が位置を決定する方式を設定する。 CSSで要素の位置を決定する方式には、次の4つがある。

1. static position指定方式
2. relative position指定方式
3. fixed position指定方式
4. absolute position指定方式

static position指定方式

HTML要素の位置を決定する最も基本的な方式は、static position指定方式である。

position値がstaticに設定された要素は、top、right、bottom、leftプロパティ値の影響を受けない。 static position指定方式は、単にWebページの流れに従って順番に要素を配置する方式である。

<style>
    div { position: static; }
</style>

すべてのHTML要素のpositionプロパティの既定値はstaticである。

relative position指定方式

relative position指定方式は、該当HTML要素の既定位置を基準に位置を設定する方式である。

HTML要素の既定位置とは、その要素がstatic position指定方式のときに決定される位置を意味する。

<style>
    div.relative { position: relative; left: 30px; }
</style>

fixed position指定方式

fixed position指定方式は、viewportを基準に位置を設定する方式である。

つまり、Webページがスクロールされても、fixed positionに指定された要素は常に同じ場所に位置する。

<style>
    div.fixed { position: fixed; top: 0; right: 0; }
</style>

absolute position指定方式

absolute position指定方式は、fixed positionがviewportを基準に位置を決定するのと似たように動作する。 ただし、viewportを基準にするのではなく、位置が設定されたancestor要素を基準に位置を設定する。

しかし、位置が設定されたancestor要素を持たない場合は、HTML文書のbody要素を基準に位置を設定する。

<style>
    div.absolute { position: absolute; top: 50px; right: 0; }
</style>

位置が設定された要素とは、static position指定方式を除くほかの方式、つまりrelative、fixed、absoluteで位置が設定された要素を意味する。

static position指定方式とほかの方式との違い

static position指定方式を除くほかの方式(relative、fixed、absolute)は、すべて何らかの基準に対して該当要素の相対的な位置を設定する方式である。

• relative position: その要素がstatic position指定方式だった場合の位置に対して相対的に配置される。
• fixed position: viewportに対して相対的に配置される。
• absolute position: 位置が設定された直近の上位ancestor要素に対して相対的に配置される。

<style>
    .static { position: static; }
    .relative { position: relative; }
    .fixed { position: fixed; }
    .absolute { position: absolute; }
</style>

z-indexプロパティ

HTML要素の位置を設定すると、設定された位置や方式によって、いくつかの要素が互いに重なることがある。 z-indexプロパティは、このように重なる要素が積み上がるstackの順序を設定する。 stackの順序は正の値も負の値も設定でき、値が大きいほど前に位置し、小さいほど後ろに位置する。

<style>
    .last {
        position: fixed;
        top: 180px; 
        left: 120px; 
        z-index: -1; 
    }
</style>

CSS positionプロパティ