主にステマブログ

ガチャメーカーについてのブログです。つれづれなるままにひぐらし

positionプロパティ(css)

 

f:id:ylang365:20140303220548j:plain

カラムおちしたときは、とりあえず気を取り直してchromeのF12を押してレイアウト

確認するようにする。

けど、そもそも表示させたい位置にうまく表示できないことがあったのでpossionプロパティについて整理してみた。

 

f:id:ylang365:20140303220831j:plain

chromeのボックスモデルを表示してくれる機能は便利。

これなくてクロスブラウザとかよくやってたよな・・と思う。

 

floatについて

possion、またはfloatを指定しない場合、各要素は縦に並んでいくので横に並んだり

重ねて表示されることはない。floatを指定した場合、以下の注意が必要。

・widthを指定する(auto以外)

・marginが相殺されない

・親要素は、子要素がないものとしてheightが計算される

 

positionについて

親子の要素が相対的関係になる場合は、float使うよりposition使った方が効率的に

レイアウトが組める。positionに設定できる値は以下。

 

static

 初期値。(指定していないのと同じ?)

 

relative

 本来表示される位置を起点として相対表示される。

 隣接するほかのボックスはrelativeを指定したボックスが本来の位置にあるものとして計算される。

 

absolute

 親要素のうち、relative、absolute、relativeを指定した要素のパディング辺を起点に配置される。

 後続ボックスはそのボックスが存在しないものとして通常どおり配置される。

 

fixed

 表示領域を起点として固定配置される。(スクロールしても同じ位置に固定表示)

 後続ボックスはそのボックスが存在しないものとして通常どおり配置される。

 

これよんだ。中途な知識でやってはまってたんで勉強になりました。

 

Web標準XHTML+CSSデザイン  クリエイターが身につけておくべき新・100の法則。

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。

 

 もう絶版?

 

owari