~パンピーサラリーマンの為の人生逆転ブログ~

【CSS】positionとは? ~要素を重ねて表示する方法~ | MUKKUN QUEST
MUKKUN QUEST     

 

【CSS】positionとは? ~要素を重ねて表示する方法~

HTML&CSS

【CSS】positionの解説です。読み方は「ポジション」
要素を重ねて表示させる方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】position ~要素を重ねて表示させる方法~

このように、上下に違う画像を用意しました。
この状況を想定して具体的に解説していきます。
いったい何が起こるのか、見当もつきませんね💡

【実例】positionはこう打てば、こうなる


☝このように打つことで、「hige」という名前の要素をtop(上)から110pxあけて表示するという指示出しになります。(※起点は一番左上になります)

☟このようになりました。

【使い方】positionは実際にこう使う

上の画像の通り、「position: absolute;」の下に、「top」「left」で広さを指定するすることで、起点となる画面の一番左上からどのくらいの位置に要素を表示させるかを指示できます。

【特徴】positionの基準点を変える

いちいち左上を起点としていては、少々扱いにくいですね。自分の指定した場所を起点にすることも可能です。

ご欄のように起点としたい要素のCSSに「position: relative;」と打ち込むことで、その要素の左上が起点になります。

例えば、このように画像の上に文字を重ねて表示している時、起点が左上のままでは、画像の上に別要素が入った時にズレてしまいます。

しかし、画像自体を起点にすれば、ズレが生じることはありません。

【応用】要素の位置を変更する方法

先ほど、基準点を変える方法として、position: relateveを紹介しましたが、シンプルに画像の位置を変更したい時にも、同じ使い方でCSSを使えます。

【応用2】要素を固定する方法

このように「position: fixed;」を使うことで、指定した要素を画面に固定することができます。
固定する位置は、画像の通り、「top」「left」「bottom」「right」で指定できます。

【注意】positionを使う時に起こりやすいミスの事例

●起点を指定する際は、かならず下地になる要素と、重なる要素が親子の関係になっている必要があります。起点の指定ができない場合、HTMLで要素をしっかり確認しましょう。

positionと合わせて知るべきCSS

z-index・・・要素が重なった時に高さの順序を設定する方法