css

「position」ってどういう意味?【意味から覚えるCSS(初心者向け)】

この記事は以下のような方にオススメです。

こんな方にオススメ
  • Webデザインを最近始めました。
  • 「position」の使い方が覚えられない。
  • もっと簡単な「position」の書き方ってないの?

「position」の単語の意味

「position – ポジション」
positionの意味は、位置、ポジション、立場といった意味があります。

positionは「位置(配置方法)を指定するためのCSS」です。

続いてpositionで指定できる値を確認していきましょう!

positionで使える値の意味

「static – スタティック」
静的、スタティック

「relative – レラティブ」
相対的、相対

「absolute – アブソリュート」
絶対的な、絶対の

「fixed – フィクスト」
固定した、動かない

「position」の配置方法の指定の仕方

/* 静的(初期値) */
position: static;

/* 相対位置 */
position: relative;

/* 絶対位置 */
position: absolute;

/* 固定位置 */
position: fixed;

「position」の省略記法(emmet)

emmet機能を利用した省略記法のご紹介です。
省略記法(emmet)は「Tabボタン」で展開する事が出来ます。

/* pos:s */
position: static;

/* pos */
position: relative;

/* pos:a */
position: absolute;

/* pos:f */
position: fixed;

ポジションの距離指定の省略記法(emmet)

emmet機能を利用した省略記法のご紹介です。
省略記法(emmet)は「Tabボタン」で展開する事が出来ます。

/* t */
top: ;

/* r */
right: ;

/* b */
bottom: ;

/* l */
left: ;

/* z */
z-index: ;

「position」の距離の指定方法

/* 上から10px */
top: 10px;

/* 右から20px */
right: 20px;

/* 下から30px */
bottom: 30px;

/* 左から40px */
left: 40px;

/* 重なり順の指定※数字が大きいほど上 */
z-index: 5;

positionの指定が上手くいかない時

absoluteがうまく効かない。

基準にする要素に「relative」を指定し忘れていないか確認してみよう!

「left」がうまく効かない時。

「right」にも距離の指定がかかってないか確認してみよう💡

まとめ

以上、今回は【意味から覚えるCSS講座】シリーズ「position」の覚え方はご紹介いたしました。