CSSの位置(position)プロパティ

位置プロパティは、通常、画面上の必要な場所に何らかの要素を配置するために使用されます。それでは、各項目について説明します。

Static(標準配置)

HTMLにおいて、デフォルトではこの標準配置が適用されます。この標準配置の初期値は、ブラウザの仕様によって異なります。

標準配置の初期値は、CSSに記述されるtop、bottom、left、rightの、それぞれの値には影響しません。

通例、それまでに設定されていた位置要素をリセットする必要がない限り、CSSファイル内で標準配置の値をあえて指定する必要はありません。

    div.a{
        position:static;
    }

Relative(相対配置)

相対配置は、基準となる標準位置から見た、相対的な位置への配置となります。”top”と “left”のCSSプロパティを使用して相対位置を設定します。

    div.b{
    	position:relative;
        top:20px;
        left:20px;
    }

css-positions-1
相対配置されたオブジェクトは、位置プロパティをどう設定したのかによって、他のオブジェクトと重なることがあります。しかし、既に別の設定で他のオブジェクトのためにスペースが確保されている場合は、重なることはありません。

相対配置される要素は、通常、絶対配置される要素の、親ブロックとして使われます。

Absolute(絶対配置)

絶対配置される要素は、標準配置以外の位置に配置されている最初の親要素から、相対的な位置に配置されます。そのような要素が見つからない場合は、ブロック要素になるのはであり、すなわち、ページ全体が基準となります。

    div.c{
    	position: absolute;
        top:20px;
        left:20px;
    }

以下の画像は相対配置されたクラス名”b”のdiv内で、クラス名”c”のdivが絶対配置されている場合の表示方法です。
css-positions-2

    <div class="b">
        <div class="c"></div>
    </div>

絶対配置される際に、相対配置の指定がない場合は、以下のようになります。
css-positions-3

Fixed(固定配置)

固定配置された要素は、ページ全体を基準に配置されており、ウィンドウをスクロールしたとしても指定した位置で固定されているため移動しません。

    div.c{
        position: fixed;
        top:20px;
        left:20px;
    }

固定配置されている要素は、スクロールの流れに沿って動きません。文書や他の要素の動きは、固定配置されている要素がページ上に存在しない場合と同様の動作をします。


Comments are closed.