positionによるボックスの配置

ボックスの配置法

positionプロパティによって、ボックス配置のスキームが設定されます。ボックス配置のスキームには、次の４つがあります。

配置法	positionの値	解説
通常配置	static	通常フロー及び浮動化によって配置する
相対配置	relative	通常配置から位置を相対的にずらして配置する
絶対配置	absolute	他のボックスを基準として配置する
固定配置	fixed	Webブラウザの表示域を基準として配置する

ここで、相対配置は相対位置決め（relative positioning）とよばれ、基本的には通常配置の範疇に属します。絶対配置と固定配置は、絶対位置決め（absolutely positioning）とよばれ、ボックスは通常フローから完全に取り除かれて独立に配置されます。また、positionプロパティの値がstaticでないボックスを位置決めされたボックス（positioned box）といいます。位置決めされたボックスに対しては、z-indexプロパティによりボックスの重ね合わせ順を設定することができます。

このページでは、通常配置以外の配置法（相対配置・絶対配置・固定配置）について解説します。通常配置については、拙著「演習で力がつくHTML/CSSコーディングの教科書」などをご覧下さい。

ボックス配置を設定するプロパティ[ position・top・right・bottom・left ]

ボックスの配置法はpositionプロパティによって指定されます。

position［ボックスの配置法を設定する］
仕様	CSS 2.1、CSS Positioned Layout Module Level 3
値の書式	static \| relative \| absolute \| fixed
適用要素	全ての要素
継承	しない
アニメーション	不可
初期値	static
値の説明	static	通常の位置に配置する（通常フロー）。この場合、top・right・bottom・leftプロパティの値は無視される。
	relative	通常の位置からのオフセットをtop・right・bottom・leftプロパティで指定する。
	absolute	positionの値がstaticではない直近の祖先要素のパディングボックスに対する位置をtop・right・bottom・leftプロパティで指定する。
	fixed	Webページの表示域に対する位置をtop・right・bottom・leftプロパティで指定する。

位置決めされたボックスの位置は、top、right、bottom、leftプロパティによって設定されます。

top・right・bottom・left［ボックス位置のオフセットを設定する］
仕様	CSS 2.1、CSS Transitions
値の書式	auto \| <長さ> \| <パーセント値>
適用要素	全ての要素
継承	しない
アニメーション	長さ、パーセント値として
初期値	auto
値の説明	長さ	実数値+単位で指定する。
	パーセント値	親要素の内容領域の幅もしくは高さに対する相対値を意味する。
	auto	通常の位置に配置するように算出される。

相対配置

positionプロパティの値をrelativeとすると、ボックスは相対配置されます。相対配置では、ボックスは次の順番で配置されます。

ボックスにpositionプロパティが設定されていないとして、通常フローでボックスを配置します。さらに、ボックスに浮動化の指定がある場合は、それに従ってボックスを移動して配置します。
1で配置した位置から、top・right・bottom・leftプロパティで指定されたオフセットだけ位置をずらします。topは基準位置から下方向、rightは左方向、bottomは上方向、leftは右方向の移動距離となります。このとき、元の位置にあったボックスの部分は空白として残ります。この相対配置による移動で、他のボックスの配置は影響を受けません。

positionの値がrelativeの場合、topとbottomを両方指定するとtopが、leftとrightを両方指定するとleftの値が優先されて用いられます。

このように、相対配置は基本的には通常フローもしくは浮動化の規則で配置されます。次の絶対配置の説明で述べるように、相対配置されたボックスは絶対配置されたボックスの基準領域（包含ブロック）となります。

相対配置の例①

HTML
	<h1>シリウス</h1>
	<p>シリウスは太陽を除くと地球上から最も明るく見える恒星です。おおいぬ座のアルファ星で、オリオン座のベテルギウス、こいぬ座のプロキオンとともに冬の大三角形を形成しています。シリウスは、主星のシリウスAと伴星のシリウスBからなる連星です。</p>

CSS
	h1 {
	padding: 40px;
	border: 2px solid skyblue;
	background-color: rgba(225,255,255,0.7);
	position: relative;
	top: 40px; left: 30px;
	}

	<h1>シリウス</h1>
	<img src="sirius.jpg">
	<p>シリウスは太陽を除くと地球上から最も明るく見える恒星です。おおいぬ座のアルファ星で、オリオン座のベテルギウス、こいぬ座のプロキオンとともに冬の大三角形を形成しています。シリウスは、主星のシリウスAと伴星のシリウスBからなる連星です。<p>

	img {
	position: relative;
	top: -50px; left: 30px;
	float: right;
	}

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>相対配置の例</title>
	<style type="text/css">
	ul.photoalbum li img {
	display: block;
	width: 200px;
	margin: 0 auto 10px;
	}
	ul.photoalbum li:after {
	content: attr(title);
	color: darkblue;
	}
	ul.photoalbum li {
	list-style-type: none;
	width: 200px;
	padding: 10px 10px 20px;
	margin: 5px;
	position: relative;
	float: left;
	background-color: white;
	-webkit-box-shadow: 0 5px 8px gray;
	-moz-box-shadow: 0 5px 8px gray;
	box-shadow: 0 5px 8px gray;
	font-size: 20px;
	text-align: center;
	}
	ul.photoalbum li:nth-child(2n+1) {
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	transform: rotate(-10deg);
	top: 15px;
	}
	ul.photoalbum li:nth-child(2n) {
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	transform: rotate(5deg);
	left: 10px;
	}
	</style>
	</head>
	<body>
	<ul class="photoalbum">
	<li title="Mars"><img src="mars.jpg"></li>
	<li title="Jupiter"><img src="jupiter.jpg"></li>
	<li title="Saturn"><img src="saturn.jpg"></li>
	</ul>
	</body>
	</html>

position値	基準領域
absolute	positionの値がstaticではない直近の祖先要素が形成する。基準領域は、当該祖先要素が何であるかによって、次のように決定される。当該祖先要素がインラインレベル要素である場合インラインレベルボックスの場合、一般にボックスは複数の行に分割される。基準領域は、分割されたボックスの内、最初と最後のボックスのパディング辺から次のように決定される。書字方向がltr（左から右）である場合、先頭にあるボックスのパディングボックスの上辺と左辺が、基準領域の上辺と左辺に、行の最後にあるボックスのパディングボックスの下辺と右辺が、基準領域の下辺と右辺となる。書字方向がrtl（右から左）である場合、行の先頭にあるボックスのパディングボックスの上辺と右辺が、基準領域の上辺と右辺に、行の最後にあるボックスのパディングボックスの下辺と左辺が、基準領域の下辺と左辺となる。ここで、インラインレベルボックスが分割されている場合、基準領域の幅は負の値をとることがある。当該祖先要素がインラインレベル要素でない場合該当する祖先要素のパディングボックスが基準領域となる。位置決めされた祖先要素がない場合 html要素のパッディングボックス（初期包含ブロック）が基準領域となります。
fixed	Webブラウザの表示域（ビューポート）

	h1 {
	position: relative;
	padding: 20px;
	border: 2px solid darkblue;
	background-color: lightyellow;
	}
	span {
	position: absolute;
	top: 0; right:0;
	font-size: 12px;
	padding: 5px;
	background-color: darkblue;
	color: white;
	}

	<h1>シリウス<span>夜空の星々</span></h1>
	<p>シリウスは太陽を除くと地球上から最も明るく見える恒星です。おおいぬ座のアルファ星で、オリオン座のベテルギウス、こいぬ座のプロキオンとともに冬の大三角形を形成しています。シリウスは、主星のシリウスAと伴星のシリウスBからなる連星です。<p>

	span.text {
	position: relative;
	margin-right: 10px;
	border: 8px solid lightgreen;
	padding: 10px;
	line-height: 4;
	}
	span.marker {
	position: absolute;
	top: -35px; left:0;
	font-size: small;
	color: white;
	line-height: 1.5;
	background-color: red;
	}

	<h1>シリウス</h1>
	<p>シリウスは太陽を除くと地球上から最も明るく見える恒星です。<span class="text"><span class="marker">→冬の大三角形</span>おおいぬ座のアルファ星で、オリオン座のベテルギウス、こいぬ座のプロキオンとともに冬の大三角形を形成しています。</span>シリウスは、主星のシリウスAと伴星のシリウスBからなる連星です。</p>

	span.text {
	position: relative;
	margin-right: 10px;
	border: 8px solid lightgreen;
	padding: 10px;
	line-height: 4;
	}
	span.marker {
	position: absolute;
	top: -35px; left:0;
	width: 100px
	font-size: small;
	color: white;
	line-height: 1.5;
	background-color: red;
	}

	#container {
	position: relative;
	margin: 0 auto;
	min-width: 680px;
	max-width: 960px;
	}
	header,nav,main,aside,footer {
	border-radius: 7px;
	padding: 10px;
	}
	header {
	margin-bottom: 10px;
	height: 90px;
	background-color: lightgreen;
	}
	nav {
	position: absolute;
	width: 150px;
	background-color: lightblue;
	}
	main {
	min-width: 300px;
	margin-left: 180px;
	margin-right: 180px;
	background-color: orange;
	}
	aside {
	position: absolute;
	right: 0px;
	width: 150px;
	background-color: pink;
	}
	nav,aside {
	top: 120px
	}
	footer {
	margin: 10px 0;
	height: 60px;
	background-color: deepskyblue;
	}

HTML
	<body>
	<div id="container">
	<header><h1>header</header></header>
	<nav>
	<ul>
	<li><a href="link1.html">リンク1</a></li>
	<li><a href="link2.html">リンク2</a></li>
	<li><a href="link3.html">リンク3</a></li>
	</ul>
	</nav>
	<main>
	<p>content</p><p>content</p><p>content</p><p>content</p>
	</main>
	<aside>
	<p>advertising</p><p>advertising</p><p>advertising</p>
	</aside>
	<footer><p>footer</p></footer>
	</div>;
	</body>;

HTML
	<a href="#top" id="totop">▲ページの先頭へ</a>
	<h1>ベテルギウス</h1>

	<section>
	テキスト1
	<p>ブロックレベルボックス</p>
	テキスト2
	</section>
	<section>
	テキスト1
	<span>インラインレベルボックス</span>
	テキスト2
	</section>

	h1 {
	padding: 20px;
	border: 2px solid crimson;
	background-color: lightpink;
	}
	a#totop {
	position: fixed;
	bottom: 0; right:0;
	padding: 5px;
	background-color: royalblue;
	border-radius: 5px 0 0 0;
	font-size: 10px;
	color: white;
	text-decoration: none;
	color: white;
	}

	section {
	position: relative;
	width: 600px;
	height: 130px;
	padding: 30px;
	margin-top: 10px;
	border: 2px solid blue;
	background-clip: content-box;
	background-color: beige;
	}
	p {
	padding: 5px;
	border: 2px solid red;
	background-color: mistyrose;
	}
	span {
	padding: 5px;
	border: 2px solid green;
	background-color: greenyellow; }
	}

	p,span {
	position: absolute;
	width: auto;
	left: auto;
	right: auto;
	margin-left: auto;
	margin-right: 50px;
	}

	p,span {
	position: absolute;
	width: 500px;
	left: 120px;
	right: 100px;
	margin-left: auto;
	margin-right: auto;
	}

positionによるボックスの配置

ボックスの配置法

ボックス配置を設定するプロパティ[ position・top・right・bottom・left ]

相対配置

相対配置の例①

相対配置の例②

相対配置の例③

絶対位置決め

当該祖先要素がインラインレベル要素である場合

当該祖先要素がインラインレベル要素でない場合

位置決めされた祖先要素がない場合

絶対配置の例

絶対配置の例①

絶対配置の例②

絶対配置の例③

固定配置の例

固定配置の例①

絶対位置決めされた要素の位置と大きさの決定

絶対位置決めされた非置換要素の水平位置と幅の決定

マージン詰めする

静的位置

絶対配置された非置換要素の水平方向の位置と幅

❶ width,left,rightが全てautoのとき（autoの数が3つの場合）

❷ width,left,rightが全てautoでないとき（autoの数が0の場合）

❶でも❷でもない場合（autoの数が1もしくは2の場合）

1.widthがautoでleftとrightの一方がautoで他方がautoでない場合

2.widthがautoでなく、leftとrightが共にautoである場合

3.width,left,rightの内1つだけがautoで他の2つがautoではない場合

1.widthがautoの場合

(ⅰ) leftとrightが共にautoの場合

(ⅱ) leftとrightのいずれかが指定され、他方がautoの場合

(ⅲ) leftとrightが指定されている場合

2.widthが指定されている場合

(ⅰ) leftとrightが共にautoの場合

(ⅱ) leftとrightのいずれかが指定され、他方がautoの場合

(ⅲ) leftとrightが指定されている場合

(1) margin-leftとmargin-rightが共にautoの場合

(2) margin-leftとmargin-rightのいずれかが指定され、他方がautoの場合

(3) margin-leftとmargin-rightが共に指定されている場合

絶対位置決めされた非置換要素の垂直位置と高さの決定

マージン詰めする

静的位置

絶対配置された非置換要素の垂直方向の位置と高さ

❶ height,top,bottomが全てautoのとき（autoの数が3つの場合）

❷ height,top,bottomが全てautoでないとき（autoの数が0の場合）

❶でも❷でもない場合（autoの数が1もしくは2の場合）

1.heightがautoでtopとbottomの一方がautoで他方がautoでない場合

2.heightがautoでなく、topとbottomが共にautoである場合

3.height,top,bottomの内1つだけがautoで他の2つがautoではない場合

絶対位置決めされた置換要素の位置と幅・高さの決定