ブログBLOG

【CSS】positionの基本とよく使う使用方法まとめ

更新日：2021/09/28

コーディングをする時に必ずと言ってもよいほどpositionは使用されていると思います。
positionを使いこなせるとデザインを再現しやすくなります。
そのため、今回は1人でも多くの方がpositionを使いこなせるようになって頂くために、positionの基本とよく使う使用方法をまとめました。
ぜひ最後まで読んでいただければと思います。

1 positionについて
2 使用ポイント
3 基本的な使い方
4 実践的な使い方
5 まとめ

positionについて

CSSのpositionを指定すると、要素の位置を設定することができます。
positionを直訳すると「(人・ものが他のものとの関係で存在している)位置」という意味です。
CSSのpositionでの使用方法とほとんど同じ意味なので覚えやすいですね！
positionでの位置設定は便利なためたくさん使いたくなりますが、むやみに使うとページが崩れる原因となってしまいます。
なので、使用すべきポイントを見定めて、positionをより有効的に使えるようになりましょう。
その使用すべきポイントは次項でまとめていますので、さっそく見てみましょう！

使用ポイント

先ほどpositionをむやみに使えば、崩れの原因となると言いました。
そんなこと言われたら、positionってどんな時に使えばいいか悩んでしまいますよね。
ですが、各値ごとに使用すべきポイントがあります。
まとめてみましたので、ぜひ参考にしてみてください。

static	デフォルト値のためあまり指定しないが、他値の打消しとしてたまに使用。
relative	・absoluteの基準としたい・高さを若干調整したい・z-indexを使いたい・自分を基準に相対配置したい場合に使用。
absolute	・親要素(static,absolute 以外のpositionを指定した)を基準に絶対配置したい・擬似要素を使いたい場合に使用。
fixed	ウィンドウを基準に固定したい場合に使用。
sticky	スクロールに応じて要素を固定したい場合に使用。

相対配置と絶対配置の意味について補足で説明したいと思います。

相対配置
現時点を基準に位置を配置すること
絶対配置
特定の要素を基準に配置すること

という意味となっています。
これからの説明でもちょくちょく出てきますので、頭に入れておきましょう！

基本的な使い方

それでは使い方を見ていきましょう。

static

指定方法


position: static;

position: static;

staticは要素のpositionのデフォルト値です。
つまり特にpositionを指定しなければ、自動でstaticになっているということです。

特徴は、

ほかのpositionで使用する、特有のtopやleftの指定ができない
z-indexの指定ができない

です。

staticについてはあまり深く考えず、いつも通りのデフォルトの要素と考えていいと思います。

relative

指定方法


position: relative;
top: 30px;
left: 40px;

position: relative;

top: 30px;

left: 40px;

relativeは自分を基準に相対配置ができます。
また、position: absolute; を指定した要素の基準ともなります。
こちらは、要素の高さを保ったままでいられるので、プロパティの中では崩れの原因になりにくいかと思います。
そのため、z-indexで重なり順を変更するために何かpositionを指定したい、という時にはrelativeを使いましょう。

特徴は、

topやleftでの配置ができる
z-indexで重なり順を変更できる
absoluteの基準になる
要素の高さを保っていられる

などです。

absolute

指定方法


position: absolute;
top: 0;
bottom: 0;

position: absolute;

top: 0;

bottom: 0;

absoluteは、relativeを指定した直近の親要素(先祖要素)を基準に絶対配置ができます。
こちらを使用するうえで注意しなければならないことは、要素の高さがなくなるということです。
高さがなくなるというのは、要素のサイズがなくなってしまうということではありません。
ページを平面と考えたとき、absoluteを指定すると宙に浮いてしまい、自分のスペースがなくなったようなイメージです。

特徴は、

親要素を基準に好きな位置に配置できる
topやleftで配置する
要素の高さがなくなる

などです。

fixed

指定方法


position: fixed;
top: 0;
left: 0;

position: fixed;

top: 0;

left: 0;

fixedはウィンドウを基準に絶対配置で固定されます。
よくサイトで見る、ヘッダーの固定やページトップボタンの配置は基本こちらのfixedで行います。
使用するうえでの注意点は、こちらもabsolute同様に要素の高さがなくなる点です。
そのため、ヘッダーなどではfixedした要素の高さ分だけ余白を取る必要があります。

特徴は、

スクロールしても要素をずっと同じ位置に固定できる
要素の高さがなくなる
topやleftで配置する

などです。

sticky

指定方法


position: sticky;
top: 0;
right: 0;

position: sticky;

top: 0;

right: 0;

stickyはrelativeを指定した親要素を基準に固定されます。
fixedと似ている感じがしますよね。
ですが、こちらのstickyは高さを保ったまま親要素を基準に固定できます。
そのため、fixedでは必要だった要素分の余白を取る必要がなくなります。
また、使用するうえでの注意点は、親要素の指定が必須となっている点です。

特徴は、

指定した親要素内で固定される
高さを保ったまま固定できる
位置の指定が必須

などです。

実践的な使い方

ここまで、positionの基本的な説明をしてきましたが、テキストだけだと完全に理解することは難しいと思います。
実際にどう使用されるのか例を見ていきましょう！

static

最初から勢いが悪いのですが、デフォルト値なのでstaticはほとんど指定しません。
他positionにstaticを上書きすれば、「デフォルトの状態に戻れて打消しができる」と覚えていただければ十分かと思います！


HTML

<div class="parent">
 親要素
  <div class="child">
   子要素
  </div>
</div>

HTML

親要素

子要素

</div>


SCSS

.parent{
position:relative;

 .child{
   position:absolute;
  }
}

SCSS

.parent{

position:relative;

.child{

position:absolute;

}

親要素

子要素

absoluteを使って子要素を親要素の右下に配置しました。
この要素をstaticで打ち消してみると、


SCSS

.parent{
position:relative;

 .child{
   position:static;　//変更
  }
}

SCSS

.parent{

position:relative;

.child{

position:static;　//変更

}

親要素

子要素

デフォルトで配置される位置に戻ってきました！

relative

続いてはrelativeです。
こちらは単体でも他のプロパティのためにも使用するため、使い方をしっかり確認しましょう。

位置の微調整するとき

少しだけ位置を調整したいけど、paddingやmarginを使いたくないときにrelativeを使用し
top bottom right left で調整します。

右のボックスだけ少し上にずらしたいという時は


SCSS

.box:nth-child(2){
 position:relative;
 top: -15px;
}

SCSS

.box:nth-child(2){

position:relative;

top: -15px;

}

実際の案件では、謎に埋まらない隙間を埋めるときや、
例外的にpaddingやmarginの外側へ出ているデザインの実現をするために使います。

こちらの濃いピンクのボックスを親要素の薄いピンクのエリアから外側に出したい時は、


SCSS

.box{　//濃いピンクのボックス
 position:relative;
 top: -15px;
 left:-15px;
}

SCSS

.box{　//濃いピンクのボックス

position:relative;

top: -15px;

left:-15px;

}

このようにすることでボックスをずらすことができます。

親要素からはみ出ているデザインをみたとき、どのように配置するか迷うと思いますが、こちらの方法はシンプルかつ他要素に影響を与えにくいのでぜひ使ってみてください！

z-indexを使うとき

他のposition(static以外)でも、z-indexは効くのですが、
正直relative以外は癖が強いため、ただz-indexを使いたい時はrelativeを使用しましょう。

薄い水色のボックスを上にしたいとき、


SCSS

.box{ //薄い水色のボックス
 position: relative;
 z-index:5;
}

SCSS

.box{ //薄い水色のボックス

position: relative;

z-index:5;

}

absoluteやstickyの基準にしたいとき

absoluteやstickyを指定する時の、基準としたい親要素にrelativeを指定します。
そうすると、absoluteやstickyの基準になれます。

★同じ要素内の別階層でrelativeを指定した場合、absoluteに一番近い親要素が基準になります。


HTML

<div class="parent01">  //relative
 <div class="parent02">  //relative
   <div class="parent03">  //relative ★直近のrelativeが基準になる
     <div class="child"></div> //absolute
   </div>
 </div>
</div>

HTML

<div class="parent01"> //relative

<div class="parent02"> //relative

<div class="parent03"> //relative ★直近のrelativeが基準になる

<div class="child"></div> //absolute

</div>

absolute

続いてはabsoluteです。
こちらを使いこなせるようになれば、要素を思うがままに動かせるようになります。
さっそく使用方法を見てみましょう。

relativeを基準に配置したいとき

relative × absoluteコンビの一番の魅力は、簡単に上下左右中央寄せにできるところです！


  position:absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;

position:absolute;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: auto;

このように指定すると、上下左右中央寄せになります。


  position:absolute;
  top: 0;
  bottom: 0;
  margin: auto;

position:absolute;

top: 0;

bottom: 0;

margin: auto;

これだと、上下中央寄せになりますし、


  position:absolute;
  right: 0;
  left: 0;
  margin: auto;

position:absolute;

right: 0;

left: 0;

margin: auto;

これだと、左右中央寄せになります。

実際の案件だと、擬似要素やpadding・marginではとうてい実現不可能なものに使用します。

よくあるのは、画像や要素、スライダーの上に文字が乗っているデザインです。
基本的なやり方はこのような感じです。

画像

テキストテキスト

緑色の画像に見立てたボックスに「テキストテキスト」と書かれた要素を重ねたいときこのように指定すると、


SCSS

.a_area02_02{ //親要素
 position:relative;

  .txt-area{ //テキストエリア
 　 position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}

SCSS

.a_area02_02{ //親要素

position:relative;

.txt-area{ //テキストエリア

　 position:absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

画像

テキストテキスト

ピッタリ画像にはまりました！

fixed

続いてはfixedです。
ウィンドウにずっと固定しておきたい要素があれば使用は必須です。
ページを制作する際には、fixedは絶対に理解しておきたいプロパティです。

ウィンドウを基準に固定したいとき

fixedを使うと、webサイトではかなりの確率である追従ヘッダーやページトップボタンなどのようにスクロールしても同じ位置に固定することができます。

実際の案件だと、追従ヘッダーやページトップボタン、画面下側に出てくるバナーやコンテンツなど、
Webページにぜひ入れたいと思われそうなものが多いです。

弊社のホームページも画面一番上には追従ヘッダー、画面右下にはページトップボタンがあります。
スクロールしていただければわかると思うのですが、ずっとついてきますよね！
これがfixedです。

fixedを使うにあたって、併用でぜひ指定してもらいたいプロパティがありますので見ていきましょう。

z-index:○○;
常に要素の1番上に来てほしいものなので大きめの数値を指定すると◎
width:100%;
fixedを指定すると、横幅が縮んでしまい焦ることがありましたがwidth:100%;で解決しました。
直下の要素にmargin-topまたはpadding-top
fixedした要素の高さ分margin-topまたはpadding-topをすることで直下の要素が被らなくなります。

基本的にヘッダーをfixedするときはこのセットで指定しています。


SCSS

.header{
 position: fixed;
 top: 0;
 left: 0;
 width:100%;
 z-index:555;
 height:100px
}

.main{ //直下の要素
 margin-top:100px;
}

SCSS

.header{

position: fixed;

top: 0;

left: 0;

width:100%;

z-index:555;

height:100px

}

.main{ //直下の要素

margin-top:100px;

}

sticky

続いてはstickyです。
他のプロパティと比べると聞きなれないですが、今後たくさん使用されることがあるかもしれません。
今までにない動きをするプロパティなので、一度は使ってみたいです。

relativeを基準に固定したいとき

stickyって便利そうなのに、あんま使われていないなと思って調べてみたら、
IEに対応していないみたいです…。
ただし、プラグイン【polifil “stickyfill”】を読み込めばIEでも使えるようになりますので、
使用するときは読み込んで使ってみてくださいね！
また、stickyを使用したい場合はoverflow:visible;以外が先祖要素のどこかで指定されていると効かなくなるので注意しましょう。

気になる使い方がこちらです。


HTML

<div class="sticky-area">
　<div class="box"></div>
</div>

HTML

</div>


SCSS

.box{
  position: sticky;
  top: 0;
  position: -webkit-sticky; //safari用
}

SCSS

.box{

position: sticky;

top: 0;

position: -webkit-sticky; //safari用

}

まとめ

ここまで読んでくださり、本当にありがとうございます。
positionはCSSでの使用頻度が高く、絶対に使いこなしたいプロパティの1つです。
癖のあるプロパティもあるため、なりふり構わずは言えませんが、必要に応じて適宜正しいpositionが使用できるようになれるように一緒に頑張っていきましょう。
今回の記事でpositionの基礎を理解できるようになって頂ければ嬉しいなと思います。

コーディング