CSS ボックスの配置のサンプル(positionのrelative)

CSSのボックスの配置のサンプルです。
positionプロパティのrelativeについてです。

position プロパティ
１．前提
２．relativeを追加 (topとleftを使用)
３．box2の下にbox3がある場合
４．relativeを追加 (rightとbottomを使用)

position プロパティ

position : 値

値	説明
static	通常の配置です。(初期値)
relative	元の位置からの相対的(relative)な配置になります。
absolute	親要素からの絶対的(absolute)な配置になります。
fixed	ウィンドウの表示領域を基準とした配置になります。
値を継承しない

ボックスの配置方法を指定します。
以下はMDNのpositionプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/position

１．前提

この「１．前提」から「４．relativeを追加 (rightとbottomを使用)」まで連続した説明になります。

以下のcssのボックスが2つ縦に並んでいるとします。

上記イメージのコードです。

<style>
#box1{
	width: 150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
#box2{
	width:150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
</style>
<body >
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>

２．relativeを追加 (topとleftを使用)

box2にposition:relativeとtopとleftを追加しました。

<style>
#box1{
	width: 150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
#box2{
	position:relative;
	top: 10px;
	left: 20px;
	width:150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
</style>
<body >
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>

画面イメージは次のようになります。

元の位置より指定した値の分ずれています。相対的(=relative)な配置になります。
top:10px・・・元の位置より上辺までの距離を10pxとする。(下にずれる)
left:20px・・・元の位置より左辺までの距離を20pxとする。(右にずれる)

３．box2の下にbox3がある場合

box2の下にbox3を追加しました。

画面イメージは次のようになります。
box3は、box2がずれていないときの下に表示されます。

上記イメージのコードです。

<style>
#box1{
	width: 150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
#box2{
	position:relative;
	top: 10px;
	left: 20px;
	width:150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
#box3{
	width:150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
</style>
<body >
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</body>

４．relativeを追加 (rightとbottomを使用)

box2のtopとleftをrightとbottomに変更しました。

<style>
#box1{
	width: 150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
#box2{
	position:relative;
	right: 5px;
	bottom:10px;
	width:150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
</style>
<body >
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>

画面イメージは次のようになります。

元の位置より指定した値の分ずれています。相対的(=relative)な配置になります。
right: 5px・・・元の位置より右辺までの距離を5pxとする。(左にずれる)
bottom:10px・・・元の位置より下辺までの距離を10pxとする。(上にずれる)