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

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

目次

position プロパティ

position : 値
説明
static 通常の配置です。(初期値)
relative 元の位置からの相対的(relative)な配置になります。
absolute 親要素からの絶対的(absolute)な配置になります。
fixed ウィンドウの表示領域を基準とした配置になります。
値を継承しない
  • ボックスの配置方法を指定します。
  • absoluteの指定は、親要素にpositionプロパティのstatic以外の値が指定されているとその親要素が基準になります。
  • 以下はMDNのpositionプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/position

1.前提

この「1.前提」から「5.親要素にposition:relativeを指定する」まで連続した説明になります。

以下の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>

2.absoluteのtopとleft

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

<style>
#box1{
	width: 150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
#box2{
	position:absolute;
	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>

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

 

親要素のbody(ウィンドウの左上)を基準にして、指定した値の分ずれています。絶対的(=absolute)な配置になります。
top:10px・・・ウィンドウの上辺までの距離を10pxとする。(下にずれる)
left:20px・・・ウィンドウの左辺までの距離を20pxとする。(右にずれる)

3.box2の下にbox3がある場合

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

この場合、box3は、つめて配置されます。
→absoluteを指定したbox2は独立した配置となる。

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

<style>
#box1{
	width: 150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
#box2{
	position:absolute;
	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>

4.absoluteのrightとbottom

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

<style>
#box1{
	width: 150px;
	height: 30px;
	color: #000;
	border:1px solid #000;
	background-color:#E0FFFF;
}
#box2{
	position:absolute;
	right: 10px;
	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>

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

親要素のbody(ウィンドウの左上)を基準にして、指定した値の分ずれています。絶対的(=absolute)な配置になります。
right: 10px・・・ウィンドウの右辺までの距離を10pxとする。(左にずれる)
bottom:10px・・・ウィンドウの下辺までの距離を10pxとする。(上にずれる)
※box2は親要素がbodyのため、ウィンドウの左上が基準となりブラウザの右下端にbox2が表示されました。

5.親要素にposition:relativeを指定する

親要素のbox1にposition:relativeを追加しました。(3行目)

absoluteを指定した要素から見て、親要素にposition:relative(static以外の値であれば可)を指定するとその親要素の辺が基準になります。

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

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

relativeが指定された親要素の左上が基準になっています。

14,15行目に、right: 10px、bottom:10pxを指定した場合、画面イメージは以下の様になります。
親要素の右下が基準になっています。

14,15行目に、right: -50px;bottom:-10px;を指定した場合、画面イメージは以下の様になります。

関連の記事

CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS 幅と高さを指定するサンプル(widthとheight)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS 回り込みと解除のサンプル(floatとclear)
CSS ボックスの配置のサンプル(positionのrelative)
CSS ボックスの配置のサンプル(positionのfixed)
CSS 要素の重なる順番を指定するサンプル(z-index)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS ボーダーの表示方法を指定するサンプル(border)
CSS 要素のボックスの種類を指定するサンプル(display)



△上に戻る