CSS relativeでボックスを配置する(position)

nas

CSSのpositionプロパティのrelativeで、ボックスを配置のサンプルです。

目次

仕様 positionプロパティのrelative
サンプル １．前提
  ２．元の位置の左上を基準としてボックスを配置
  ３．relativeを指定した要素は独立した配置になる
  ４．元の位置の右下を基準としてボックスを配置

positionプロパティのrelative

position : 値

positionプロパティの値であるrelativeは、元の位置から相対的にボックスを配置します。

値 説明
relative 元の位置からの相対的(relative)な配置になります。
relativeは、相対的という意味です。
値を継承しない

１．前提

この「１．前提」から「４．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>

２．元の位置の左上を基準としてボックスを配置

元の位置の左上を基準としてボックスを配置するサンプルです。
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とする。(右にずれる)

３．relativeを指定した要素は独立した配置になる

relativeを指定した要素は独立した配置になります。
HTMLで、box2の下にbox3を追加しました。

<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>

この場合、box3は、box2が存在しないかのように上につめて配置されます。
→relativeを指定したbox2は独立した配置となります。

４．元の位置の右下を基準としてボックスを配置

元の位置の右下を基準としてボックスを配置するサンプルです。
box2に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とする。(上にずれる)

関連の記事

CSS 回り込みと解除のサンプル(floatとclear)
CSS absoluteでボックスを配置する(position)
CSS fixedでボックスを配置する(position)
CSS z-index 要素の重なる順番を指定する
CSS display 要素(ボックス)の表示方法を指定する

△上に戻る