お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    スキルアップは今すぐこちら!▶

    【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;は、ここぞという時に使いましょう!

    メンティー
    メンティー

    分かりました!

    ご参考下さい😃

    0 件のコメント

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