CSSにおける要素の絶対位置指定

このレッスンでは、要素の絶対位置指定について説明します。これは、ページ上の指定された座標に要素を配置することを可能にします。例えば、ページ上端から100px、左端から200pxの位置に要素を配置できます。要素はそこに移動し、他の要素がそこにあろうともその上に単純に重なります。このとき、要素はドキュメントの通常フローから外れると言われます：他のすべての要素は、この要素が存在しないかのように振る舞います。

要素を絶対位置指定にするには、その要素の positionプロパティを値absoluteに設定する必要があります。このプロパティに加えて、縦方向と横方向の座標を指定するための2つのプロパティも必要です。

縦方向には、上からのオフセットか下からのオフセットを設定する必要があります。上からのオフセットはtopプロパティで、下からのオフセットはbottomプロパティで設定します。横方向には、左からのオフセットか右からのオフセットを設定する必要があります。左からのオフセットはleftプロパティで、右からのオフセットはrightプロパティで設定します。

例を見てみましょう。

例

まず、位置指定を行わない2つのブロックを作成しましょう（bodyにはデフォルトでmarginがあるため、要素はウィンドウの端に接していないことに注意してください）：

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

例

次に、緑色のブロックに絶対位置指定を設定し、上から150px、左から100pxの位置に配置してみましょう：

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

例

次に、緑色のブロックを上から0px、左から0pxの位置に配置してみましょう：

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

例

次に、緑色のブロックを上から0px、右から0pxの位置に配置してみましょう：

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

例

次に、緑色のブロックを下から0px、右から0pxの位置に配置してみましょう：

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

例

次に、緑色のブロックを下から0px、左から0pxの位置に配置してみましょう：

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

実践問題

絶対位置指定を使用して、以下のようにブロックを配置してください：