更新:2019年9月29日HTML-CSS2こんにちは。今回はあまり深く考えたことがなかったCSSのpositionについてわかりやすく解説できたらと思います。目次absoluteとrelativeについて親要素もpositionで子要素もpositionの時まとめabsoluteとrelativeについてabsolute:絶対位置relative:相対位置これネットでよく見るんですが日本語ですらあまり意味がわかりません。right:0;}と言った感じに書くとブラウザ(一応ブラウザというよりもサイトそのもの)の左上を0として要素が他の要素を受け付けないで配置されるのでブラウザの左上に配置されます。(ブラウザを基準として位置を決めるのはfixedと言うプロパティになります)例えば、A要素B要素どちらも縦横100pxとするとA要素はB要素を押して縦に2つ並ぶことになります。B要素がabsoluteを持ってる場合周りの要素の影響を受けないのでそのままA要素に重なる状態になります。relative元ある位置を0として移動します。height:100px;}この状態だとbox2はbox1によって100px下に押されます。top:10px;}relativeとtop:10pxを追加すると押し出されてる状態から10px下に下がります。親要素もpositionで子要素もpositionの時こちらではbox1が親要素でその中に子要素としてbox2が入ってる状態です。background:blue;}上の画像のように左上を0(起点)としてtop:50px(上から50px)left:50px(左から50px)に移動します。ここまでは通常の先ほど説明したabsoluteと同じです。left:0px;}この際に、box2(子供要素)にposition:absoluteを適応しても子要素はページ自体の左上(0点)には移動しません。これはbox1が親要素でありpositionを持った要素だからです。仮にbox1が親要素のままでpositionを持ってない状態にするとbox2は子要素であるにも関わらずページの左上に移動します。わかりやすくするために赤の位置を違う要素でズラしてます。position:absolute;}本来であれば子要素が親要素からはみ出すことはないのですがposition:absoluteを持つとページ自体がdiv2にとっての親要素になるのでdiv2の親要素であるdiv1がどこにあろうが関係なくdiv2は左上を基準として動くようになります。他の要素の影響を受けなくなってしまいます。そこでposition:absoluteを親要素内部格納して置く為にposition:absoluteを持つ親はpositionを持たせて置かないといけません。その親要素も同じくposition:absoluteを持ってしまうと他の要素を受けずに浮遊した状態になってしまいます。(後の要素がposition:abosluteを持つ要素を無視して背後に隠れてしまって見えなくなる。)結果として親要素にposition:relativeを持たせると他の要素から無視されない、さらに子要素をはみ出させないための枠組みになると言った効果があります。まとめよっぽどのことがない限りはposition:absoluteを単体で使ってページ自体を親要素として使うことはないです。positon:relativeはposition:absoluteを使う時親要素に使うのは必須だと思ってていいと思います。RinkerKindleAmazon楽天市場Yahooショッピングこの記事を書いた人sgw2018年にバンクーバーの州立学校BCITを卒業して少しバンクーバーの日系企業でコーダーとして働いたあと、現在はバンクーバーにてフロントエンドデベロッパーとして就活中。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。@shusgw2018年にバンクーバーの州立学校BCITを卒業して少しバンクーバーの日系企業でコーダーとして働いたあと、現在はバンクーバーにてフロントエンドデベロッパーとして就活中。あとReactも勉強中。