CSSのプロパティであるtop, right, bottom, leftを利用することで対象となる要素の基準となる場所から表示させたい位置に移動させることができます。

top, left, bottom, rightの設定
top, left, bottom, rightの設定

それらのプロパティは位置を設定するだけではなく各プロパティの値を0に設定することでブラウザの画面全体に背景色を設定することも可能です。

CSSのpositionプロパティの値のfixed, absoluteとtop, right, bottom, leftを組み合わせることでブラウザ上ではどのようなことが起こるのか確認していきましょう。

top:0; right:0; bottom:0; left:0;での違い

最初にtop:0; right:0; bottom:0; left:0;を設定し、positionのfixed, absoluteでどのような違いがあるか確認してみましょう。

CSSのpositionプロパティをfixedに設定し、top:0; right:0; bottom:0; left:0, backgroudColorを設定するとブラウザの画面全体に背景色が広がります。


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>fixed, absoluteの違い</title>
</head>
	<body>
		<div style="position:fixed;top:0;right:0;bottom:0;left:0;background-color:#9ad3bc;">
		</div>
	</body>
</body>
</html>
fixed;top:0;right:0;bottom:0;left:0;
fixedでtop:0;right:0;bottom:0;left:0;
この設定は、モーダルウィンドウを作成する際の背景のオーバーレイなどに利用することができます。

つぎにpositionをabsoluteに設定してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>fixed, absoluteの違い</title>
</head>
	<body>
		<div style="position:absolute;top:0;right:0;bottom:0;left:0;background-color:#9ad3bc;">
		</div>
	</body>
</body>
</html>
fixed;top:0;right:0;bottom:0;left:0;
absoluteでtop:0;right:0;bottom:0;left:0;

どちらにも違いがなくブラウザ全体に背景色が適用されています。

次にCSSを適用したdiv要素の中に文字列を追加します。文字列はブラウザで表示される画面よりも長くなるように設定します。


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>fixed, absoluteの違い</title>
</head>
	<body>
		<div style="position:fixed;top:0;right:0;bottom:0;left:0;background-color:#9ad3bc;">
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		</div>
	</body>
</body>
</html>

fixedの場合は画面に入らない領域があってもスクロールをして確認ということはできず全体を見るためにはブラウザを広げる必要があります。

全体をみるためにはブラウザを広げる必要がある
全体をみるためにはブラウザを広げる必要がある

次にabsoluteに変更を行います。


<div style="position:absolute;top:0;right:0;bottom:0;left:0;background-color:#9ad3bc;">

画面に収まりきらない領域についてはスクロールすることで確認することができますが、収まりきらなかった部分には背景色はありません。

ブラウザに収まらなかった領域は背景色なし
ブラウザに収まらなかった領域は背景色なし

positionに何も設定しなかった場合の動作も確認しておきましょう。


<div style="top:0;right:0;bottom:0;left:0;background-color:#9ad3bc;">
	text
</div>

通常のdivタグに文字を入れた時と違いはありません。

縦に広がることはない

left:0; right:0;に設定した場合

leftとrightのみ0にした場合にどのような表示になるかも確認してみましょう。fixedを確認しますが、divタグの中に何もない場合はブラウザには何も表示されません。


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>fixed, absoluteの違い</title>
</head>
	<body>
		<div style="position:fixed;right:0;left:0;background-color:#9ad3bc;">
		</div>
	</body>
</body>
</html>

absoluteも同様にdivタグの中に何もない場合は何も表示されません。

何も表示されません
何も表示されません

divタグの中に文字を入れてみるとブラウザ横幅全体に広がった領域が表示されます。


<div style="position:fixed;right:0;left:0;background-color:#9ad3bc;">
	<p>text</p>
</div>
左右に広がった背景色
左右に広がった背景色

positionをabsoluteに設定を行っても結果は同じです。ブラウザの横幅を広げたからといって背景色がない領域が表示されることはありません。

もしleft、rightのどちらも設定していない場合は、divはブロック要素ですが、ブラウザの横幅全体に広がることはなくfixed, absoluteの設定により横幅は中の文字列の長さになります。left:0; right:0の設定が影響を与えていることがわかります。

right,leftを設定しない場合
right,leftを設定しない場合

top:0; bottom:0;に設定した場合

right:0; left:0;の場合は左右に広がることが確認できました。今後はtop:0; bottom:0の設定のみ行います。

divタグの中に何も入っていない場合はfixed, absoluteどちらの場合も何も表示されません。


<body>
	<div style="position:a;top:0;bottom:0;background-color:#9ad3bc;">
	</div>
</body>

divタグの中に文字を入れてみるとブラウザ上下に広がった領域が表示されます。


<body>
	<div style="position:a;top:0;bottom:0;background-color:#9ad3bc;">
	</div>
</body>
縦方向に広がる背景色
縦方向に広がる背景色

right:0; left:0;に設定するとブラウザ全体に表示されるということがわかっているのでright:0にしたらどうなるのかと疑問に思うかもしれませんが、結果は予想通り右側に領域が移動します(right:0の位置)。left:0に設定すると左側に張り付きます。


<div style="position:fixed;top:0;bottom:0;right:0;background-color:#9ad3bc;">
right:0でブラウザの右側に張り付く
right:0でブラウザの右側に張り付く

absoluteに設定した場合も同様に縦幅全体に広がりますが、高さのある文字列を含むと最初に表示される領域以外の背景色はありません。

ブラウザに収まらなかった領域は背景色なし
ブラウザに収まらなかった領域は背景色なし

真ん中中央に配置

top:0;bottom:0;right:0;left:0;の設定を利用して真ん中中央に四角を表示することが可能です。

fixed, absoluteどちらでも結果は同じです。

widthとheightに値を設定し、margin:autoを設定することで実現可能です。

<!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>fixed, absoluteの違い</title> </head> <body> <div style=”position:fixed;top:0;bottom:0;right:0;left:0;background-color:#9ad3bc; width:100px; height:100px; margin:auto;”> </div> </body> </body> </html>
四角領域を中心に表示
四角領域を中心に表示

ブラウザを広げても狭めても中央をキープした状態になります。

top:0;bottom:0;のみ設定した場合は縦方向の真ん中に表示されます。


<div style="position:fixed;top:0;bottom:0;background-color:#9ad3bc; width:100px; height:100px; margin:auto;">
縦方向の真ん中に表示
縦方向の真ん中に表示

予想はつきますが、right:0;left:0;に設定した場合は横方向の真ん中に表示されます。

横方向の真ん中に表示
横方向の真ん中に表示

このようにCSSのpositionプロパティの値のfixed, absoluteとtop, right, bottom, leftを組み合わせることでいろいろな設定ができることが確認できました。