cssの学び③ position: absolute;の使い方

こんにちは！

京都開発研究所受託プロダクトチームのインターン生、村高歩夢です！

本日は全社会議がありました！社長の青山さんからの言葉、とても学ぶことが多いです。

しかも、モチベーションが跳ね上がるんです。

今日の学びをしっかりアウトプットしなくてはいけませんね。

さて、今日はcssについて書いていきます。

全社会議の学びについてはおそらく他のインターン生が書いてると思うので、

僕は違うものを書きます。同じこと書いてもつまらないのでね！

全社会議が気になる方はコチラ！

【position: absolute;】

このcssの文章は要素の配置に関わるものなんですね。

このcssの文章は特徴だけではなく、使い方も一緒に覚えましょう。

まずね。名前がカッコ良すぎます。

サッカーの試合でイニエスタとかシャビとか絶対使ってますよ、これ。

"The next, position absolute!!!!"

僕が相手チームだったら絶望です。

そんなカッコイイ文章ですから、当然、多用したくなるんです。

しかし、ここで注意点!!

可愛いものには棘がある。

こいつを正しく理解していないと大変なことになるんです。

通常の配置を決めるcssの文章は基準が自分にあります。

つまり、そのcssの文章を記述したセレクタが基準となります。

一方、position: absolute;は基準がposition: relative;を持つ親要素になります。

したがって、親要素を変更するとあらぬところに自分が配置される可能性があります。

僕の理想の就職活動を例にしてもう少し簡単に説明しますね。

position: absolute;を使わない通常の配置決めでは、

就職活動をしているあなたが面接の場所を決めることができます。

あなたが決めるんですから、どこを選んでもあなたは困りませんよね。

しかし、position: absolute; を用いた配置決めでは

面接官が場所を決めます。

面接官に、「ニューヨークで面接します。」と言われて、

「よし、自由の女神に祈ってから面接しよっ！」

なんて思わないでしょう。とっても困るはずです。

このように、position: absolute;は予期せぬことがよく起こります。

したがって、実際のコーディングではなるべく使わない方がいいのです。

奥の手として使ってくださいね。

僕自身、position: absolute;の特徴は知っていたのですが、実際に使う際、

その特徴をどう活かすのかを考えていませんでした。

position: absolute;の理解が深まって良かったと同時に、学び方も身について一石二鳥でした。

文量、反省します。忙しい中、読んでいただきましてありがとうございます。

---------------------------------------------------------------------------------------------

インターン募集ページ: https://guardian.jpn.com/recruit/intern/

メンバー紹介ページ：https://guardian.jpn.com/member/Murataka_Ayumu/

---------------------------------------------------------------------------------------------