CSSにおける座標指定なしの絶対位置指定

実際のところ、絶対位置指定をする際に座標を指定することは必須ではありません。要素に単にpositionの値をabsoluteと書くだけで、それは絶対位置指定されますが、元々あった場所に留まります。その間、他のすべての要素は、その要素が存在しないかのように振る舞い、その上に重なってくる可能性があります。

例を見てみましょう。

例

まず、位置指定なしの3つのブロックと、それらの間にいくつかのテキストを配置してみます：

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

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

例

では、緑色のブロックにabsoluteを追加してみましょう。結果、このブロックは元の位置に留まりますが、下にあるすべての要素は、この要素が存在しないかのように振る舞い、その上に重なってきます：

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

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

例

今度は、垂直方向の位置を指定せずに、プロパティleftだけを追加してみましょう。結果、水平方向では指定した値の位置に配置されますが、垂直方向では元々あった場所に留まります：

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

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	left: 40px; /* 水平方向の位置を追加 */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

例

次に、逆に、水平方向の位置を指定せずに、プロパティtopを追加してみましょう。結果、垂直方向では指定した値の位置に配置されますが、水平方向では元々あった場所に留まります：

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

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 100px; /* 垂直方向の位置を追加 */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}