CSS レイアウト - position プロパティ

❮ 前章へ次章へ ❯

position プロパティは、要素に使用する配置方法のタイプ（static、relative、fixed、absolute）を指定します。

position プロパティ

position プロパティは、要素に使用する配置方法のタイプを指定します。

position には4つの異なる値があります：

static
relative
fixed
absolute

その次に、要素は、top、bottom、left、right プロパティを使用して配置します。しかし、最初に position プロパティを設定していない場合、これらのプロパティの効果はありません。

position: static;

static 配置の要素は、

HTML要素は、デフォルトで static に配置されます。

static 配置の要素は、top、bottom、left、right プロパティによる影響を受けません。

position: static; の要素は、あらゆる特別な方法でも配置されません。常に、ページの通常フローに従って配置されます：

This <div> element has position: static;

ここで使用されている CSS は次の通りです：

例

div.static {
position: static;
border: 3px solid #73AD21;
}

Try it Yourself ❯

position: relative;

相対配置の要素に top、right、bottom、left プロパティをセットすることで、通常の位置から離れた場所に調整されます。その他のコンテンツは、要素により残されたギャップにフィットするように調整されることはありません

This <div> element has position: relative;

ここで使用されている CSS は次の通りです：:

例

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

Try it Yourself ❯

position: fixed;

position: fixed; の要素は、ビューポートからの相対位置に配置されます。これは、ページをスクロールしても、常に、同じ場所から動かないことを意味します。top、right、bottom、left プロパティは、要素の配置に使用します。

fixed 要素は、それが正常に配置されていたページにギャップを残しません。

ページの右下隅に固定された要素に注目してください。ここで使用されている CSS は次の通りです：:

例

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

Try it Yourself ❯

This <div> element has position: fixed;

position: absolute;

position: absolute; の要素は、(ビューポートからの相対位置に配置されるのではなく) 最も近くに配置された祖先に相対的な位置に配置されます。

しかし、absolute 配置要素が position 配置された祖先を持たない場合は、文書の body を使用するので、ページのスクロールと共に移動します。

注: "positioned" 要素は、position が static 以外のものです。

次に簡単例を示します：

This <div> element has position: relative;

This <div> element has position: absolute;

ここで使用されている CSS は次の通りです：:

例

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

Try it Yourself ❯

要素のオーバラップ

要素を配置する時、他の要素にオーバラップすることができます。

z-index プロパティは、要素の重ね合せの順序（スタックオーダー：どの要素を他の要素の前、または後に置くか）を指定します。

要素には、正または負のスタック順を指定できます:

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

例

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Try it Yourself ❯

スタック順序の値が大きい要素が、小さい要素の前に表示されます：

注: z-index を指定していない 2 つ要素がオーバーラップして配置された場合、 HTML コードの後方に配置された要素が上に表示されます

画像内へのテキスト配置

画像の上にテキストの配置方法を以下に示します：

例

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Try it Yourself:

Top Left ❯ Top Right ❯ Bottom Left ❯ Bottom Right ❯ Centered ❯

その他の例

要素の形を設定
この例は、要素の形を設定する方法のデモです。要素をこの形に切り取って表示します。

スクロールを使用した要素のオーバーフローを表示する方法
この例では、要素のコンテンツが指定された領域に収めるには大きすぎる場合、スクロールバーを作成するために overflow プロパティを設定する方法のデモです。

オーバフローの自動処理をブラウザに設定する方法
この例は、ブラウザにオーバフローの自動処理を行わせる方法のデモです。

カーソルの変更
この例は、カーソルの変更方法のデモです。

練習問題で確認テスト！

Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯ Exercise 5 ❯

全ての CSS ポジションプロパティ

プロパティ	説明
bottom	配置するボックスの下マージンを設定する
clip	absolute 配置の要素を切取るする
cursor	表示するカーソルのタイプを指定する
left	配置するボックスの左マージンを設定する
overflow	コンテンツが要素のボックスからオーバフローした場合の表示方法を指定する
overflow-x	要素のコンテンツ領域をオーバーフローした場合、コンテンツの左/右辺をどうするかを指定する
overflow-y	要素のコンテンツ領域をオーバーフローした場合、コンテンツの上/下辺をどうするかを指定する
position	要素の配置タイプを指定する
right	配置するボックスの右マージンを設定する
top	配置するボックスの上マージンを設定する
z-index	要素の重ね合わせ順序を設定する

❮ 前章へ次章へ ❯