スキルアップはこちら!!▶[click]

【CSS】position:absolute;について再度おさらい!思いのままに図形をWEBページ上に配置する

CSS(シーエスエス)
この記事は約3分で読めます。

position:absolute;については、過去にも何度か書いていますが、それでもまた分からなくなってしまったので、再度おさらいの意味を込めてご紹介したいと思います。

メンティー
メンティー

position:absolute;が、また分からなくなりました!!

メンター
メンター

position:absolute;、再度おさらいしてみましょう!

position:absolute;とは?

position – CSS: カスケーディングスタイルシート – MDN

position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。 top, right, bottom, left の各プロパティが、配置された要素の最終的な位置を決めます。

https://developer.mozilla.org/ja/docs/Web/CSS/position

図形に対してposition:absoluteを設定します。

absolute
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の包含ブロックに対して相対配置されます。最終的な位置は top, right, bottom, left の値によって決定されます。
この値では、 z-index の値が auto ではない場合、新しい重ね合わせコンテキストを作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと相殺されません。

position:absoluteを指定しただけでは、何も変化は起こりません。最終的な位置は top, right, bottom, left の値によって決定されるためです。

top:0px

画面の最上部(top:0px)に位置します。

left:0px

画面の最左部(left:0px)に位置します。

right:0px;

画面の最右部(right:0px)に位置します。

つまり、top:0px・right:0pxとすると、画面の右上端に位置します。

bottom:0px;

画面の最下部(bottom:0px)に位置します。

つまり、bottom:0px、left:0pxとすると、画面の左下端に位置します。

上下左右0pxだと、どうなる?

上下左右0pxの場合、順番がどうあれ、topとleftの値が優先されて、左上に配置されました。

position:absoluteでtop:0px、right:0px、bottom:0px、left:0pxを指定すると、左上に配置されるようです。
※それはこうです!などあれば、教えていただけますと幸いです。

position:absolute;の注意点

position:absolute;を多用すると、絶対参照になってしまい本来の位置を無視するので、画像に文字が被ってしまう・・・などの問題が発生してしまう場合があります。

ひとつの調整で色々な場所に影響が及ぶ場合がありますので、使用するタイミングには注意が必要です。

メンター
メンター

position:absolute;は、ここぞという時に使いましょう!

メンティー
メンティー

分かりました!

ご参考下さい😃

タイトルとURLをコピーしました