• HOME > 
  • CSS > 
  • CSSのpositionプロパティの使い方【初心者にもわかり...

CSSのpositionプロパティの使い方【初心者にもわかりやすく解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

positionプロパティとは?

HTMLは上から下へとブロックが連なっていくような仕組みなので均等に配置されるデザインになります。

自然とバランスの整ったレイアウトが作れるものの、一方でこだわったデザインを作るためには要素を自由に配置できる必要があります。

CSSのpositionプロパティを使えば、ブロックの枠組みにとらわれず自由な位置に要素を配置することができます。

表示例

positionプロパティは、その性質を把握しないと思い通りの位置に配置することは難しいのでしっかりと理解しておきましょう。

positionプロパティの値の種類

全ての要素のpositionプロパティは何も指定しなければstaticという初期値になっており、この状態ではtopやleftなどの距離を組み合わせても、要素を動かすことはできません。

positionプロパティには、このstaticを含めて5つの値があり、「relative」「absolute」「fixed」「sticky」のいずれかを指定すると要素を動かせるようになります。

static・初期値
・何も指定することができない
元の位置での高さを保持する
relative元の位置からの距離で配置する
・absoluteを使う際に親要素に指定する
absolute基準となる親要素からの距離で配置する元の位置での高さを失う
fixedブラウザのウィンドウを基準として配置する
stickyrelativeとabsoluteとfixedを足したような性質で親要素の中で固定配置できる元の位置での高さを保持する

縦と横からの移動距離で配置する

positionプロパティは単体では使えず、上下の位置を決める「top」・「bottom」と左右の位置を決める「left」・「right」とセットで使用します。

上下左右の表示例

それぞれ基準となる位置から「上に何px(下に何px)」移動させ、「左に何px(右に何px)」移動させるというような形で配置場所を指定します。

移動距離の表示例

上下左右、配置したい位置に近い基準を選んで距離を指定します。単位にはpxや%が使用でき、「-」(マイナス)の数値を指定すれば基準から反対方向に移動させることが可能です。

基本となる記述方法

まずpositionプロパティに指定したい値を記述し、「top」もしくは「bottom」で上下の移動距離、「left」もしくは「right」で左右の移動距離を指定します。

基本となる記述

HTML

<div class="test_page">
    <div class="test_area">
        <div class="box">要素1</div>
    </div>
</div>

CSS

.box{
    position:relative;
    top:30px;
    left:-40px;
}

relativeとabsoluteとfixedとstickyの違い

positionプロパティを使うためにはこれらの性質の違いをしっかりと把握し、適した選択をする必要があります。

relativeは要素が今現在ある場所を基準として配置することができます。元の位置での高さは残ったままです。

relativeの表示例

absoluteはrelativeを指定してある親要素を基準として、その端からの距離を指定して任意の位置に移動させることができます。元の位置での高さを失います。

absoluteの表示例

それに対して、fixedは常にウインドウの端を基準として距離を指定しますので親要素に左右されません。そしてページをスクロールしてもウインドウ内で配置した場所から動くことなく同じ場所に表示され続けます。

fixedの表示例

最後にstickyはrelativeとfixedを合わせたような性質で、基準となる親要素の中だけでスクロールしても動かないで同じ場所に表示されます。さらに元の位置での高さを残すことができます。

fixedの表示例

次項からそれぞれの使い方や特徴について詳しく説明していきます。

relativeの使い方

要素が今現在ある場所を起点として上下左右に距離を指定して移動させることができます。

特徴は、要素が本来持っていた高さを保持させたまま移動するという点です。

要素を移動させると元の場所に何もない空間が生まれてしまうので注意が必要です。

relativeの記述の仕方

positionプロパティにrelativeを指定し、上下左右に移動させる距離を指定します。

HTML

<div class="test_page">
    <div class="test_area">
        <div class="box">要素1</div>
    </div>
</div>

CSS

.box{
    position:relative;
    top:30px;
    left:40px;
}

プレビュー

のプレビュー

absoluteの使い方

relativeを指定した親要素を基準に上下左右に距離を指定して移動させることができます。

relativeとの大きな違いは、absoluteを指定すると要素が元々あった場所での要素の高さは失われるという点です。

absoluteの記述の仕方

記述にしたい親要素にrelativeを指定した後、動かしたい要素にabsoluteと距離を指定します。

HTML

<div class="test_page">
    <div class="test_area">
        <div class="box">要素1</div>
    </div>
</div>

CSS

.test_area{
    position:relative;
}
.box{
    position:absolute;
    top:30px;
    left:40px;
}

プレビュー

のプレビュー

absoluteを指定すると元の高さを失う

元の高さを失う

relativeでは移動させた後に何もない空間が生まれてしまいますが、absoluteではその心配はありません。

反対に、親要素自体の高さが小さい場合などではabsoluteを指定した要素が他の要素に重なってしまう恐れがあります。

親要素にはrelativeを指定する

最も注意しなければならないのは、基準としたい親要素にはrelativeを指定するという点です。

直近の親要素にrelativeが指定されていなければ更にその親要素へと遡ってrelativeを探し基準とするので、ページ内で一切relativeが指定されていなければabsoluteの基準はウィンドウの端となってしまいます。

relativeがない場合

positionを使うときは、はじめにrelativeを記述して配置する領域を決めて、その後にabsoluteで要素を配置するという一連の流れで覚えておきましょう。

fixedの使い方

基本的な記述の方法は、移動の基準がrelativeを指定した親要素ではなくウィンドウになるという点以外はabsoluteと同じです。

HTML

<div class="test_page">
    <div class="test_area">
        <div class="box">要素1</div>
        <div id="dammy1" class="dammy">ダミーテキスト1</div>
        <div id="dammy2" class="dammy">ダミーテキスト2</div>
        <div id="dammy3" class="dammy">ダミーテキスト3</div>
        <div id="dammy4" class="dammy">ダミーテキスト4</div>
    </div>
</div>

CSS

.box{
    position:fixed;
    top:30px;
    left:40px;
}

プレビュー

スクロールしても要素は同じ位置にとどまり続けます。

fixedの活用方法

fixedを指定した要素はページをスクロールしてもウィンドウ内の同じ場所に表示され続けるので、メニューなどを常にユーザーの目に入るようにしておきたいものに指定して、スクロールしても追尾するフローティングコンテンツを作ることができます。

ユーザーはメニューなどを探す必要がなくなり、いつでもクリックできるので操作性が向上します。

stickyの使い方

relativeとfixedを足したような性質を持ちます。

fixedとの違いは、親要素を基準として距離を指定するという点です。また、スクロールにより親要素が画面外になればstickyを指定した要素も一緒に画面外へ移動します。

親要素にrelativeを指定しておく必要が無く、元の位置に高さを残しておくことができます。

stickyの記述の仕方

HTML

<div class="test_page">
    <div class="test_area">
        <div class="box">要素1</div>
        <div id="dammy1" class="dammy">ダミーテキスト</div>
        <div id="dammy2" class="dammy">ダミーテキスト</div>
    </div>
    <div id="dammy3" class="dammy">ダミーテキスト</div>
    <div id="dammy4" class="dammy">ダミーテキスト</div>
</div>

CSS

.box{
    position:sticky;
    top:10px;
    left:10px;
}

プレビュー

スクロールしてみてください。

上のように、最初の状態ではrelativeのように位置取りをしスクロールされるとfixedのようにその場にとどまるというような動きをします。

stickyの活用方法

stickyは親要素の範囲ないだけで固定表示されるので、バナーなど一定の範囲でのみ表示させたいコンテンツを作るときに役立ちます。

重なり順を指定する

冒頭に述べた通りHTMLは通常はブロックのように連なっていきますので同じ位置に複数の要素が重なるということは起きません。

しかしpositionプロパティを使うと任意の位置に要素を配置できるため、要素同士が重なるという状態が発生します。

重なり順の表示例

この時の重なり順はz-indexプロパティによって指定することができます。

z-indexの使い方

重なりあう要素に対してそれぞれz-indexを数値で指定します。

大きい数値を指定した方が手前に、小さい数値を指定した方が奥になります。

z-indexの表示例

HTML

<div class="test_page">
    <div class="test_area">
        <div id="box1" class="box">要素1</div>
        <div id="box2" class="box">要素2</div>
    </div>
</div>

CSS

.test_area{
    position: relative;
}
#box1{
    background: #333;
    position: absolute;
    top:50px;
    left: 60px;
    z-index:1;
}
#box2{
    background: #666;
    position: absolute;
    top:70px;
    left:120px;
    z-index: 2;
}

プレビュー

z-indexのプレビュー

必ず最背面や最前面にしたい要素に対しては、あらかじめ「-9999」や「9999」といった大きな値を指定しておくことで予期せず他の要素が覆いかぶさってしまったり、もぐりこんでしまうことを防ぎます。

特にfixedの場合は他の要素に被さらないよう注意

ページ内で他にもz-indexプロパティが指定されている要素がある場合は、その部分にスクロールしてきたときに潜ってしまったり被さってしまいます。

意図せず他の要素に覆いかぶさってしまうとユーザーの操作を妨げてしまうことがあります。

下の例ではウインドウ下部にバナーを固定表示させていますが、一番下までスクロールするとフッターに重なってしまい、フッターのボタンが押せない状態になっています。

このような場合にはページが一定の位置までスクロールされたらfixedを指定した要素が非表示になるようにJavascriptでプログラミングしておく必要があります。

positionを使用した際の中央揃えの方法

absoluteやfixedを使うとtext-alignなどによって中央揃えを行うことが出来なくなります。

フローティングバナーなど中央に配置したい状況はありますが、下図のようにleftに50%を指定してもうまく中央に配置できません。

中央に配置したい状況

うまく中央に配置できない理由

left(もしくはright)に50%を指定しても中央配置できないのは、50%の位置に要素の左端(もしくは右端)が合わされるためです。

うまく中央に配置できない

なので移動距離から要素の横幅の半分だけマイナスすることが出来ればちょうど真ん中に配置することが可能になります。

横幅の半分だけマイナスする

要素の横幅の半分だけマイナスするには、marginもしくはcalcを使用します。

marginを使って中央にする

left(もしくはright)に50%を指定して移動させた後、margin-left(もしくはmargin-right)に要素の横幅の半分のサイズをマイナスで指定して反対方向に戻します。

CSS

.box{
    width:100px;
    height:100px;
    position:absolute;
    top:30px;;
    left:50%;
    mergin-left:-50px;
}

プレビュー

marginを使って中央にする

要素の横幅を%で指定している場合は、margin-left(もしくはmargin-right)の単位も%にすればOKです。

calcを使って中央にする

CSS内で計算を行えるcalc関数を利用すれば、上記のmarginを使わずに同じことが行えます。

CSS

.box{
    width:100px;
    height:100px;
    position:absolute;
    top:30px;;
    left:calc(50% - 50px);
}
リンク先のサムネイル
CSSのcalcの使い方【CSS内で計算を行う方法】

calcを使えばCSS内で計算を行い、その計算から導き出された計算結果をプロパティの値に使用することができます。calcでは、演算子を使った四則演算(足し算、引き算、掛け算、割り算)が可能で、pxや%など異なる単位同士でも計算することができます。...【もっと読む】

positionを使う際の注意点

ウインドウサイズの変化によってレイアウトが崩れる恐れがあります。

%で位置を指定している場合などは、下図のように画面サイズが小さくなると重なってしまうことがあるので注意が必要です。

ウインドウサイズの変化 ウインドウサイズの変化

positionプロパティを使う際はウィンドウサイズごとに表示を確認して、メディアクエリを使うなどして表示が崩れないように追加で指定しておく必要があります。

まとめ

positionプロパティを使えば複雑なレイアウトも表現可能になり、作ったデザインをサイトで再現するためにはpositionプロパティは欠かせません。レイアウト面だけでなく、画面のスクロールとも連動させたサイトを作るためには、fixedやstickyが必要不可欠です。それぞれ異なる性質や位置の指定の仕方など少し難しいpositionプロパティですが、使いこなせればどんなレイアウトでも作れるのでマスターしておきましょう。

広告
広告

関連する記事

サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。