コーディング

2011.6.7

ポジション属性に関してのリスト｜CSSプロパティ

CSS

CSSで制御する事のできる表示位置に関するポジション属性のリストです。フロートの記述方法についてはこちらで説明しています。

CSSプロパティのポジション属性に関するリスト

値	visible（はみ出して表示初期値） hidden（はみ出た部分を断ち切る[閉じる]） scroll（スクロールバーを表示） auto（自動[指定した幅を超えた場合、スクロール]）

任意のブロック要素からテキストや画像がはみ出た場合にどのように扱うかを指定する属性。

floatをかけた場合、それの親要素は囲む力を失ってしまうためレイアウトが崩れてしまう。フロートによる崩れを解決する簡単な方法は親要素にoverflow: hidden;を指定する。

他の方法としてはフロート属性のかかった要素の弟要素（次にくる）にclear: both;を指定する、もしくはクリアフィックス（clearfix）という方法もある。

overflow: visible;

/* フロートによる崩れを回避したい場合 */
#container{
	overflow: hidden;
}
#main{
	float: right;
}
#sidebar{
	float: left;
}

値	static（通常位置初期値） relative（通常位置からの相対的な位置） absolute（親要素、もしくはウィンドウからの絶対位置） fixed（ウィンドウからの絶対位置。固定位置）

ボックスの位置や座標点を指定する属性。この属性と合わせてtoprightbottomleftを使い細かい指示もできる。

スクロールしてもついてくるメニューや特殊なレイアウトを使用したい等に使える。

staticを指定している場合はtoprightbottomleft属性は使えない。

また、fixedはIE6までは対応されていない。

position: relative;
right: 50px;
bottom: 20px;

値	auto（初期値）
数値指定（相対）	px（ディスプレイのドット） em（1em = 100%） ex（xの大きさ） %
数値指定（絶対）	mm（1mm） cm（10mm） in（2.54cm） pt（1in = win:72pt / mac:96pt） pc（12pt）

position属性の値にrelative、absolute、fixedを指定していた場合に指定できる。

static（通常位置初期値）を値にしていた場合は無視される。

position: relative;
right: 50px;
bottom: 20px;

値	visible（表示初期値） hidden（非表示） collapse（表の行・列をつめる）

表示だけを消す場合に指定する属性。見た目そのものが消えるだけでボックス自体は残る。領域そのものを消したい場合はdisplay: none;を使用する。

また、表の行や列を詰めたい場合にも指定。ただしFirefox以外はうまく対応していないもよう。

visibility: hidden;

値	auto（初期値）数値（数値が大きいほど手前）

ボックス同士を重ねて表示したい場合に指定する属性。重なり順を自由に指定できる。position属性の値をrelative、absolute、fixedに指定した場合に有効。

.box_1{
	position: relative;
	z-index: 0;
}
.box_2{
	position: relative;
	z-index: 1;
}

値	auto（切り抜き無し初期値） rect（長さ）

領域の四方を基準とした切抜きを指定する属性。position属性の値をabsolute、fixedに指定した場合に有効。

記述方法はrect[上右下左]と一括で指定。

clip: 10px 20px 30px 40px;