【CSS】要素の配置方法を指定するposition属性を学習しよう

position属性はWebページ内で要素がどのように配置されるかを指定する属性です。

例えば、div要素を画面の上から10px、画面の左から20pxの位置に配置したり、親要素を起点に下から2rem、右から10%の位置に配置するなどのことができます。

【CSS】(display属性)block、inline、inline-blockについてで学習したように、div要素3つを緑、オレンジ、赤の順に記述すると次のように表示されます。

display属性をinline-blockに変更すると次のようになります。

これは、div要素が記述された順にそれぞれ同じ様に配置されているという結果です。

position属性を使うと、緑の要素の右上にオレンジの要素を配置するなど要素の配置を自由に指定することができます

理解度チェック

  • position属性を使用するとどんなことができるようになりますか?

position属性の初期値

初期値はstatic(静的)です。

要素は通常通り配置されます。
また、このあと説明する配置に関する属性(toprightbottomleft)は適用されません。

relative(相対位置指定)

position属性に値relative(相対位置指定)を指定すると、要素は通常通り配置され、要素自身の位置を基準に配置場所を指定することができるようになります。

配置場所を指定するには、top(上)属性、right(右)属性、bottom(下)属性、left(左)属性を使用します。
それぞれに指定できる値は、pxrem%などがあります。

次の例では、2番目のdiv要素を元々の位置から、上(top)から20px、左(left)から20pxに配置しています。


div {
    width: 40px;
    height: 40px;
    display: inline-block;
}

div:nth-child(2) {
    position: relative;
    top: 20px;
    left: 20px;
}
    

<div style="background-color: green;"></div>
<div style="background-color: orange;"></div>
<div style="background-color: red;"></div>
        

理解度チェック

  • position属性のrelativeにはどのような特徴がありますか?

absolute(絶対位置指定)

absolute(絶対位置指定)を指定すると、要素は通常通りの位置に配置されません
次の例で示すように、absoluteを指定した要素は他の要素から無視するように扱われます。

また、relativeと同様にtop属性、right属性、bottom属性、left属性で配置を指定することもできます。
この時、基準となる要素は直近の祖先でposition属性にstatic以外が指定されている要素もしくはルート(html)要素となります。


div {
    width: 40px;
    height: 40px;
    display: inline-block;
}

div:nth-child(2) {
    position: absolute;
    top: 20px;
    left: 20px;
}
    

<div style="background-color: green;"></div>
<div style="background-color: orange;"></div>
<div style="background-color: red;"></div>
        

この例では、直近の祖先にstatic(初期値)以外の値が指定されている要素が存在しないため、ルート要素からtopleft共に20pxの位置で表示されています。

もっと分かりやすいようにsection要素でdiv要素を覆ってみましょう。


div {
    width: 40px;
    height: 40px;
    display: inline-block;
}

div:nth-child(2) {
    position: absolute;
    top: 20px;
    left: 20px;
}
    

<section style="margin-top: 2rem;>
    <div style="background-color: green;"></div>
    <div style="background-color: orange;"></div>
    <div style="background-color: red;"></div>
</section>
        

section要素にmargin-top属性で上部に余白を指定しているため、全体的に下に表示されるようになりました。
しかし、absoluteを指定しているオレンジの要素はルート要素からの配置指定が適用されています。

次に、オレンジの要素をsection要素の相対位置に表示するようにしてみます。
section要素(祖先要素)のposition属性にstatic以外の値を使用します


<section style="margin-top: 2rem;position: relative;>
    <div style="background-color: green;"></div>
    <div style="background-color: orange;"></div>
    <div style="background-color: red;"></div>
</section>
        

理解度チェック

  • position属性のabsoluteにはどのような特徴がありますか?
  • absoluteは単体で使用されることは滅多にありません。なぜでしょうか?

fixed (固定位置指定)

absoluteと同様にfixed(固定位置指定)を指定すると、要素は通常通りの位置に配置されません
absoluteと異なるのは、要素の位置はビューポート(Viewport)からの相対位置で決定する点と、スクロールしても要素がその配置にとどまり続けるという点です。

ビューポートというのは、文章が表示される画面のことを指しますが、この場合はブラウザのウィンドウの表示領域という意味になります。つまり、要素からの相対位置ではありません

fixedを設定することで、スクロールしても浮いているかの様に付いてくる要素を作成できます。

要素の配置は、top属性、right属性、bottom属性、left属性で指定します。


section {
    height: 200px;
    overflow-y: scroll;
    padding-left: 70px;
}

div {
    width: 40px;
    height: 40px;
    background-color: orange;
    /* 固定位置指定を設定します。 */    
    position: fixed;
    top: 40px;
    left: 20px;
}
    

<section>
    <p>
        ある日<br>
        森の中<br>
        くまさんに<br>
        出会った<br>
        花咲く<br>
        森の道<br>
        くまさんに<br>
        出会った<br>
        くまさんの<br>
        いうことにゃ<br>
        お嬢さん<br>
        お逃げなさい<br>
        スタコラ<br>
        サッササノサ<br>
        サッササノサ<br>
    </p>
    <div></div>
</section>
    

理解度チェック

  • position属性のfixedにはどのような特徴がありますか?
  • ビューポートとは何のことですか?

sticky (粘着位置指定)

sticky(粘着位置指定)は相対位置のrelativeと固定位置のfixedを組み合わせたような動きを表現できる値です。

初期配置は、通常の配置と変わらない(relativeと同じ)ですが、スクロールで要素の位置が変化した場合にtop属性やleft属性などで指定されたビューポートからの相対位置に達するとその箇所で固定(fixedと同じ)されるようになります。

次の例では、3つ目の赤色のdiv要素をスクロール時に上(top)から10pxで粘着するように指定しています。


section {
    height: 200px;
    overflow-y: scroll;
    /* 子要素を横並びにします。 */
    display: flex; 
}

p {
    margin: 0;
}

div {
    width: 40px;
    height: 40px;
}

div:nth-child(3) {
    /* 粘着位置指定を設定します。 */
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
}
    

<section>
    <p>
        ある日<br>
        森の中<br>
        くまさんに<br>
        出会った<br>
        花咲く<br>
        森の道<br>
        くまさんに<br>
        出会った<br>
        くまさんの<br>
        いうことにゃ<br>
        お嬢さん<br>
        お逃げなさい<br>
        スタコラ<br>
        サッササノサ<br>
        サッササノサ<br>
    </p>
    <aside>
        <div style="background-color: green;"></div>
        <div style="background-color: orange;"></div>
        <div style="background-color: red;"></div>
    </aside>
</section>
    

ある日
森の中
くまさんに
出会った
花咲く
森の道
くまさんに
出会った
くまさんの
いうことにゃ
お嬢さん
お逃げなさい
スタコラ
サッササノサ
サッササノサ

理解度チェック

  • position属性のstickyにはどのような特徴がありますか?

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。