JavaScriptでpositionプロパティを設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでpositionプロパティを設定する方法について解説しています。CSSのpositionプロパティではボックスの配置方法を指定することができます。JavaScriptのstyle.positionを使ったpositionプロパティの設定方法を覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでpositionプロパティを設定する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでpositionプロパティを設定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

positionプロパティとは

CSSの要素が表示される位置を設定するプロパティです。設定する値によって、表示位置を調整することができます。

 

positionプロパティに設定できる値の種類

下記の5種類があります。それぞれの大まかな内容を紹介します。

1:static

positionの既定値で、positionを指定していない場合はstaticとなります。つまりこの値は、通常の何も指定していない場合の表示位置になります。

2:relative

staticを指定した場合の表示位置から、4つの方向(top, right, bottom, left)へ数値を指定することで指定した数値分表示位置をずらすことができます。

3:absolute

親のHTML要素に対して表示する位置を絶対的に指定します。指定は4つの方向(top, right, bottom, left)への数値でおこないます。絶対的な位置なので、他の要素の有無にかからわず必ずそこに表示され、他の要素がある場合は重なって表示されます。

4:fixed

平たく言うと表示位置を固定するときに使います。4つの方向(top, right, bottom, left)へ数値を指定することで、スクロールをしても常にその位置に表示するようになります。

5:sticky

これまでの4つより後にできた設定値で、スクロールした際に指定した位置に貼り付けるような動きになります。スクロール中に位置が固定されてついてくる感じはfixedに近いですが、stickyの対象エリアの中で位置が固定されるため、対象エリアの表示位置によってstickyを指定した要素の表示位置も変わります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptでpositionプロパティを設定する方法

HTMLElementにCSSのスタイルを設定するのと同様に、【HTMLエレメント】.style.positionとすることで設定できます。合わせて4つの方向を指定する場合は、【HTMLエレメント】.style.topのように設定します。

 

実際に書いてみよう

何かのサイトでメニューやテーブルの項目が、画面のスクロールについてくる動きを見かけることがあるかと思います。positionをJavaScriptで設定する例として、ヘッダーがついてくるような設定をしてみます。

まずはHTMLで「TECHACADEMYジュニア」と書いたヘッダーを用意します。

HTMLのソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div class="header">
      TECHACADEMYジュニア
    </div>
  </body>
</html>

CSSでヘッダーの表示領域がわかりやすいように色をつけます。また、スクロールが発生するようにbodyタグの長さを1000pxにしています。

CSSのソース

body{
  height:1000px;
}
.header{
  background-color:bisque;
  padding:10px;
  width:100%
}

JavaScriptのソース

let header = document.getElementsByClassName('header');
let headerBottom = header[0].getBoundingClientRect().bottom;

window.onscroll = e => {
  if(headerBottom < document.documentElement.scrollTop){
    header[0].style.position = 'fixed';
    header[0].style.top = 0;
  }else{
    header[0].style.position = 'static';
    header[0].style.top = 'auto';
  }  
}
  1. getElementsByClassNameでクラス名を使ってHTMLの要素(今回はpositionを設定するヘッダー)を取得しています
  2. 「header[0].getBoundingClientRect().bottom」にて、ヘッダーを表示している要素の下の位置を取得しています
  3. 「document.documentElement.scrollTop」で画面のスクロールした量を取得し、要素の位置と比較して要素が隠れたらpositionをfixed(固定)にし、画面の一番上(top=0)に表示しています。これによりスクロールについてくる動きになります
  4. スクロール位置が、ヘッダーの最初の表示位置になったら、positionをstatic(初期表示)に戻しています。

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。