福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【初心者向け】相対位置(relative)と絶対位置(absolute)をわかりやすく

SUGOYOKU BLOG

【初心者向け】相対位置(relative)と絶対位置(absolute)をわかりやすく

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

要素を複数重ねたレイアウトや、自由度の高い配置を叶えるposition:relative;とposition:absolute;についてわかりやすく簡単に解説します。


相対位置と絶対位置

相対位置(position: relative;)


position: relative;は相対位置ということで、周囲の他の要素の配置をもとに自身の配置が決定しています。
他の要素との順番を守っているイメージです。

flex テキスト下揃え



絶対位置(position: absolute;)

position: absolute;は絶対位置ということで、周囲の他の要素の配置を無視することができます。ではどのように制御するかというと、親要素にposition: relative;を設定することで、この親要素に対するtop, right, bottom, left の値によって配置を設定することができます。そのため、親要素にrelativeを見つけることができないと迷子になってしまい、想定外の場所に出現してしまいます。


flex テキスト下揃え



おまけ


positionプロパティの規定値は「static」ですが、このままでは【top, right, bottom, left, z-index】のプロパティは効果を発揮しません。特にz-indexが効かずに困っている方はposition:relative;を設定してみるとよいかもです。

勉強されている方、絶対位置と相対位置ってなに?という方に参考にしていただけたら幸いです。

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス「あなたのアイボー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得