CSSでフローティングレイヤー効果を実装する

定義と使用法

position 属性は、要素の配置タイプを指定します。

説明

この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。

デフォルト:

静的

継承:

いいえ

バージョン:

CSS2

JavaScript 構文:

object.style.position= "絶対"

例

h2 要素の位置決め:

h2
{position:absolute;left:100px;
top:150px;
}

TIY

ブラウザサポート

すべての主要なブラウザはposition属性をサポートします。

注: 属性値「inherit」は、Internet Explorer (IE8 を含む) のどのバージョンでもサポートされていません。

可能な値

Value

説明

absolute

静的配置以外の最初の親要素を基準にして配置される絶対配置要素を生成します。

要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

fixed

ブラウザウィンドウを基準にして相対的に配置された絶対位置の要素を生成します。

要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

relative

通常の位置を基準にして相対的に配置された要素を生成します。

つまり、「left:20」は要素の左の位置に 20 ピクセルを追加します。

static デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。

inherit

は、position 属性の値が親要素から継承される必要があることを指定します。

継承