CSS/Style/position

CSS/Style/position

自分をどのようなルールで配置するか?まわりから配置としてどのように扱われるかを決めるモノ

static

普通の状態、デフォルト値。周りとの関係性を考慮して流し込むように位置が決定する。

absolute

絶対位置指定。

周りのレイアウトを無視してどこに配置するかを決定する。 周りのレイアウトを無視するということは周りからも無視されるということ。

親要素の position 状態によってその意味は変わる

relative

static で配置された位置を基準にそこから相対的に要素をどう配置するか決める。 表示位置は移動するが、周りからは static に配置されているモノとして振る舞う つまり周りに影響うける。

実際にはこのような役割は transform translate のほうが動きがよいので、 代用されることも多い。

position 設定を static ではない状態にしたい場合に、よく用いられる。

fixed

表示領域に対して絶対的に配置する。 なので画面上部に固定されてスクロールに追従(コンテンツ位置に影響されない)ようなメニューを実装できる。

親子関係は完全無視で周りにもまったく影響をうけない与えない。

sticky

↑の position 状態をすべてかさね合わせたような振る舞いをするようになる。

自身の形状としては、static のように描画される。 表示位置は親の表示領域内で変化するが、モノはそこにあるかのように振る舞う。 位置は親が表示されている表示領域に対して相対的である。

1つの親に対して複数の要素で同一設定すると面白い動きにはなるがコードと挙動が一致しなくなるので止めたほうがよいだろう。

関連 style

Tags

css/style/position/start.txt · 最終更新: 2019-12-13 12:10 by ore