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

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

目次

position プロパティ

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

fixedのtopとleft

3行目にposition:fixed、4行目にtop、5行目にleftを指定しています。

<style>
#box1{
	position:fixed;
	top:20px;
	left:20px;
	width: 100px;
	height:50px;
	background-color:#E0FFFF;
	color: #000;
	border:1px solid #000;
}
</style>
<body >
<div id="box1">box1
</body>

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

ウィンドウ表示領域の左上を基準にして、指定した値の分ずれています。
top:20px・・・ウィンドウの上までの距離を20pxとする。(下にずれる)
left:20px・・・ウィンドウの左までの距離を20pxとする。(右にずれる)

fixedのrightとbottom

3行目にposition:fixed、4行目にbottom、5行目にrightを指定しています。

<style>
#box1{
	position:fixed;
	bottom:20px;
	right:20px;
	width: 100px;
	height:50px;
	background-color:#E0FFFF;
	color: #000;
	border:1px solid #000;
}
</style>
<body >
<div id="box1">box1
</body>

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

ウィンドウ表示領域の右下を基準にして、指定した値の分ずれています。
bottom:20px・・・ウィンドウの下辺までの距離を20pxとする。(上にずれる)
right: 20px・・・ウィンドウの右辺までの距離を20pxとする。(左にずれる)

サンプル

左上に見えているbox1が、サンプルです。上記コードのtopとleftを指定したコードを使用しています。位置が固定され、スクロールしても動きません。

box1

関連の記事

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



△上に戻る