15分で理解するCSS position

複雑なレイアウトやブロック要素の重なりを回避するために使用頻度が高いCSSのpositonプロパティ。

デフォルトではstaticとなっており指定しなくてもしても関係ない、位置指定無効値といったところ。

fixedとはviewport(画面表示領域)に対して相対的な絶対位置を指定する値。
いつも画面上、もしくは表示領域上の定位置を陣取る”花見の場所取り”的なプロパティ値。

relativeはviewportまたは入れ子された親要素を基準にして相対的な位置をとる。直上の顔色を見ながら立ち位置を柔軟に変え、同じ位置関係であれば他のブロック要素などもお構いなしの心臓の強さ。

absoluteは直親のタグ内の左上を基準として絶対位置に配置される。スクロールの影響も受けるので、fixedとは似て非なる絶対位置主義者。頑固で融通が利かない。relativeとは常に相いれないで重なりやすい。

表示領域の定位置=fixed

親ブロック要素内の定位置=absolute

親ブロック要素位置に対して相対位置=relative

忘れてよいプロパティ値=static

といったところだろうか。

掲載情報につきましては、当サイトが独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。