CSS

【positionの使い方】親をrelativeで固定して、子をabsoluteで動かそう| CSS初心者向け

イケゾー
この記事は、こんな人におすすめ!
・positionの使い方が理解できない
・relativeとabsoluteの使い方がわからない
・画像の上に文字を配置したい

このような疑問にお答えします。

本記事の内容

  • positionの使い方を超カンタンに

筆者情報

Ikezooo

  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人

「position」って、とっつきにくいですよね。
僕の「position」に関連した記事にもたくさん質問がきますので、難しいと感じる方も多いのではないでしょうか。

もっと詳しく
【HTML/CSS初心者の模写】ヒーロー画像の上に文字を重ねて表示する方法を解説|Norton

続きを見る

もっと詳しく
【HTML/CSS初心者】便利なposition「sticky」の基本の使い方を解説|ときしらずの宿の模写

続きを見る

困っている方も多いので、今回は超カンタンに使えるように解説します。

それでは、どうぞ!

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

positionとは

positionは、配置方法を設定するCSSプロパティです。

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

こういった場面でよく使います。

画像の上に文字(カテゴリー名)を表示する

「プログラミング」という文字を、画像の上に表示しています。

画像を固定して常に表示する

画像を画面上部に固定しています。

さまざまな使い方ができます
イケゾー

「相対位置」と「絶対位置」の違い

positionを使いこなす上で、理解しておきたいことは「相対と絶対」です。

ボックスの配置方法(基準位置)が、相対位置(relative)か絶対位置(absolute)かを指定する際に使用します。

この解説って、初心者には不親切ですよね。
相対位置とか絶対位置と言われた途端に、多くの人が迷子です。

どの位置を基準にして、配置を指定するかの基準が必要という意味です。

ポイント

・相対位置とは、本来その要素が表示される位置を基準にする

・絶対位置とは、親要素を基準にする

この解釈で、僕自身は迷子じゃなくなりました。

読み進めるとどんどん理解できます
イケゾー

positionの使い方

それでは、実際に使用する時の注意点をお伝えします。

absoluteとrelativeはセットで使う

よく勘違いされるのですが、absoluteとrelativeはセットで使います

親要素を基準に位置を決めるabsoluteを使用する場合は、
親要素に「relative」をつけ、子要素に「absolute」をセットで設定します。

セットで使わないと、子要素の位置が定まりません。

さらに、注意することがあります。

配置方法を設定するだけであって、位置を指定しているわけではないということ。
位置を指定する場合は、「top・bottom・right・left」を使います。

次に具体例をあげていきます
イケゾー

(使用例)画像の上に文字を表示する

\画像の上にボタンを配置する方法/

もっと詳しく
【HTML/CSS初心者の模写】ヒーロー画像の上に文字を重ねて表示する方法を解説|Norton

続きを見る

手を動かしてみよう
イケゾー

(使用例)画像を固定して、常に表示しておく

\トップ画像を画面上部に固定/

もっと詳しく
【HTML/CSS初心者】便利なposition「sticky」の基本の使い方を解説|ときしらずの宿の模写

続きを見る

手を動かしてみよう
イケゾー

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

まとめ

とっつきにくい「position」について解説しました。

ポイント

・「相対位置」と「絶対位置」の違い

・親要素を基準に、子要素を配置する

・absoluteとrelativeは必ずセットで使う

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS