contents

CSS リファレンス編

配置(レイヤー)

position

【説 明】

指定された範囲の表示位置を絶対位置にするか、相対位置にするかを指定します。指定された範囲は、レイヤーと同様な状態になります。


【 値 】

absolute

「top」や「left」などのプロパティで、ページの左上からの絶対位置を指定したい場合に指定します。

relative

「top」や「left」などのプロパティで、通常のHTMLの規則にしたがった場合の位置(直前にあるコンテンツ)からの相対位置を指定したい場合に指定します。

static

特に位置を指定しない標準の状態に設定します。「position」を指定しない場合と同様の結果になります。


【使用例】

以下の例では、testというIDを使用して絶対位置を設定しています。

#test { position: absolute; top: 100px; left: 100px }


left

【説 明】

「position」プロパティを指定した場合の左からの距離を指定します。指定された範囲は、レイヤーと同様な状態になります。


【 値 】

auto

HTMLの規則にしたがった場合の通常の(直前にあるコンテンツからの)位置に配置します。 「position」プロパティを「relative」に指定して、「left」を「0」にするのと同様の結果になります。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で距離を直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

この範囲を含む範囲の幅に対するパーセントで指定します。


【使用例】

以下の例では、testというIDを使用して、本来表示されるべき位置から右に40ピクセルの位置に表示するように設定しています。

#test { position: relative; left: 40px }


top

【説 明】

「position」プロパティを指定した場合の上からの距離を指定します。指定された範囲は、レイヤーと同様な状態になります。


【 値 】

auto

HTMLの規則にしたがった場合の通常の(直前にあるコンテンツからの)位置に配置します。 「position」プロパティを「relative」に指定して、「top」を「0」にするのと同様の結果になります。

●単位つきの数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値で距離を直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

この範囲を含む範囲の高さに対するパーセントで指定します。


【使用例】

以下の例では、testというIDを使用して、本来表示されるべき位置から下に100ピクセルの位置に表示するように設定しています。

#test { position: relative; top: 100px }


z-index

【説 明】

「position」プロパティを指定した場合の、重なる順序を整数で指定します。数が大きいものほど上に表示されます。


【 値 】

auto

特に指定のない場合と同様です。「position」プロパティを使用する度に、下から上へという順序で重ねられていきます。

整数で指定

整数で重なる順序を指定します。数が大きいものほど上に表示されます。指定する範囲を含む範囲(親となるレイヤー)の下に表示させたい場合は、マイナスの値を指定します。つまり、親子関係で言うと、親は「0」ということになります。


【使用例】

以下の例では、重なる順序を下から3番目に指定しています。

#test { position: absolute; z-index: 3 }


clip

【説 明】

「position」プロパティで「absolute」を指定した場合の、クリッピングして見える範囲を指定します。この範囲は、必ず四角形でなければなりません。


auto

「clip」を指定しない場合と同様に表示されます。

●単位つきの数値で直接指定

rect(上 右 下 左)の形式で4つの座標をスペースで区切って、四角形の範囲を指定します。ここで指定する値は、ページの左上からの距離ではなく、「top」や「left」で指定した位置からの相対距離です。 指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。


【使用例】

以下の例では、縦横20ピクセルの四角形にクリッピングします。

#test {position: absolute; top: 100px; left: 100px; clip: rect(5px 25px 25px 5px) }


overflow

【説 明】

「position」プロパティと同時に「width」や「height」プロパティを指定した場合などの、内容が収まりきらない場合の表示方法を指定します。


【 値 】

none

内容に合わせて表示範囲が自動的に拡張されます。特にこのプロパティが指定されない場合は、この状態になります。

clip

内容をクリッピングして表示します。

scroll

内容をスクロールして見られるようにします。


【使用例】

以下の例では、収まりきらない内容をクリッピングして表示します。

#test {position: absolute; top: 80px; left: 80px; width: 100px; height: 100px; overflow: clip}