position :absolute;とposition:relative;を組み合わせて要素の位置を自由に変更する

【　position　】プロパティを使用することで、子要素の配置を自由に変更することができます。具体的には、positionプロパティで親要素に『relative(相対位置)』、子要素に『absolute(絶対位置)』を指定することで、親要素に対する子要素の配置を指定します。

positionプロパティとは？？

そもそも【position】プロパティとはどういうものなのか？という疑問をお持ちの方もいると思うので、そこから解説していきます。

MDN Web Docsのカスケーティングスタイルシート（https://developer.mozilla.org/ja/docs/Web/CSS/position）によると、『position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。 top, right, bottom, left の各プロパティが、配置された要素の最終的な位置を決めます。』とされています。つまり、positionプロパティを指定したうえで、top.right.bottom,leftプロパティを指定することで、要素の位置を上下左右で配置できるということです。

文章で説明してもわかりづらいので、実際にコードを見ながら解説していきます。

absolute(絶対位置)、relative(相対位置)とは？？

それでは、positionプロパティでどの要素にどの値を指定する必要があるのか解説していきます。positionプロパティにはいくつか指定できる値がありますが、今回は組み合わせて使うことで便利なabsoluteとrelativeについて紹介します。

【 position 】を使った実際のコード

実際のコードが下記になります。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

まず、親要素にposition:relative;、子要素にposition:absolute;を指定しています。

ここで、absolute（絶対位置）とは絶対的な配置を指定する値です。abusoluteを指定した要素は、絶対的な配置になります。そして、relative(相対位置)とは、相対的な配置を指定する値です。

つまり、親要素に相対的な配置となるposition:relative;を指定し、

子要素にposition:absoluteを指定することで、親要素に対する子要素の相対的な配置を絶対的に指定することができるようになります。

そして、子要素に親要素に対してどの配置にするかtop,left.bottom,rightプロパティを指定します。

上記のコードで解説すると、親要素（parent）の右上に子要素（child-a）を配置したい場合、

top:0;（上から0pxの位置）、right:0;（右から0pxの位置）を指定します。

また、 親要素（parent）の左下に子要素（child-b）を配置したい場合、

bottom:0;（下から0pxの位置）、left:0;（右から0pxの位置）を指定します。

ここで、top,right,bottom,leftにはpx,%等が指定できます。

例えば、right:30px;と指定すれば、親要素に対して右から30pxの位置に配置されます。

初期値はtop:0,left:0のため、何も指定しなければ親要素に対して左上に配置されます。

いろいろな使い方があります

上記の例では、単純に右上、左上に配置したがこれらをうまく使えば、要素を重ねて表示したり、画像の上に文字を配置したりすることができます。

読んでいただきありがとうございました。

今回は要素自体の配置の指定について解説しましたが、要素内のテキストなどの配置指定の方法も解説しておりますので、こちらもご参考に！

また、positionプロパティに指定できる値はほかにもあるため、応用編と含めて別の記事で紹介させていただきたいと思います。

ABOUT AUTHOR

シュウヘイ

フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。