position: relative と absolute の使い方[解説]

relative は 元の位置が基準、absolute はページの左上が基準

position: relative;

「上下左右の言葉」と「数値」を入力する事で、要素の位置が変わります。

position: relative; は元の要素の位置を基準に移動します。

relative は要素が動いても、元の位置にはスペースが空いたままです。

position: absolute;

relative では top: 0; と left: 0; では元々の位置という表現になりますが、absolute では画面の一番左上という表現になります。

absolute は「親要素に relative がつければ、親要素の左上」が基準となります。

親要素にposition: relative; がついており、「position: absolute; top: 0; right: 0;」をつけると下の図のようになります。一番よく使うのはこの使用法じゃないかと思います。

relative と違い、absolute で動かした場合は元の要素の位置にスペースはなくなり、次の要素が詰めて配置されるようになります。

まとめ

relative

  • 基準は元の位置
  • 移動しても元のスペースは残る

absolute

  • 基準は「relative のついた親要素」、もしくは画面の一番左上
  • absolute をつけた時点で元の要素のスペースはなくなる
css.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

-広告-

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。