CSS:ブロックの位置を調整(position編)

レイアウトを調整する時に使うのが

position, float, flexなど。positionの挙動は、親要素などで異なるので確認ついでに表にまとめてみた。

Positionの利用での注意点

確認点

①abusolute便利!ただし親要素のpositionは、relative等に。

親要素は、外側を囲む要素は、「position:relative;」にする。

staticのままだと、ページ全体からの絶対位置になる。

②トランスペアレント要素タグは使えない。

主にはaタグ。

HTML5のコンテンツ・モデルで、トランスペアレント(transparent)コンテンツに該当する要素は、position等の計算にも出てこない。

トランスペアレント要素の一覧

a, ins, del. object, audio, video, canvas, map, noscriptなど

positionプロパティの値一覧(本題)

働き他の要素の位置計算使い道注意点・おまけ
static[初期設定]、[通常配置]
top, right, bottom, leftのプロパティ指定不可
通常通り初期設定top, right, bottom, leftを指定しないrelativeと挙動は似ている。
z-index等の利用不可
relative[相対位置]
通常の位置からtop, right, bottom, left分ずらして表示。
後続要素は、この要素の元の位置(top, right, bottom, leftで移動前)を使って計算。absoluteの親要素に指定。top, right, bottom, leftを付けなければ、他に影響は出ないのでは。
absolute[絶対配置]後続要素は、この要素がないものとして計算。ブロックを並べる時に便利。relative要素の中にabsolute要素を並べるのがありがちな使い方か。
fixed[固定]
スクロールでも動かない。
後続要素は、この要素がないものとして計算。メニュー、タイトル、など常に表示させたい要素を置くのに使う重なり調節は、z-indexなどで表示の上下関係を変更。
stickyボックスの位置を、通常のフローに従って計算。フロールートまたは包含ブロックに対して相対的にオフセットrelativeと似ている
実験的
inherit通常継承しない場合も、親の値を継承CSSグローバル値
initial要素の初期値に初期化CSSグローバル値
unsetinitial+inheritな働きCSSグローバル値

参考サイト

サルワカさんのサイトは、デザインがシンプル・綺麗で、勉強になる。プロすげー

z-index

オススメサイト

まとめ

position使うなら、absolute in relative。(偏見?

Advertise

シェアする

フォローする