• 投稿日：2022年03月25日 08時44分28秒
  • 更新日：2022年03月25日 08時46分26秒

position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。

top, right, bottom, left の各プロパティが、配置された要素の最終的な位置を決めます。

by MDN Web Docs

要素がどのように配置されるかの方法をpositionプロパティに指定します。

指定方法は５種類あり、ここでは特に「relative」と「absolute」について紹介します。

static

要素は文書の通常のフローに従って配置されます。何も指定がない場合、これが適用されます。

relative

要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。

イメージとしては、staticを指定したときの表示位置からどれだけづらすかを決める際に使用します。

真ん中の水色のブロックにrelativeを適用し、上から(10px,10px)ずらした位置に表示するようにしています。

<style>
    #relative-example1{
        padding: 5px;
        width: calc(100% - 10px);
        height:calc(100% - 10px);
    }
    #relative-example1 > div{
        padding: 5px;
        width: 100px;
        height:100px;
    }
    
    #relative-example1 > div:nth-of-type(1){
        background-color: yellow;
    }
    #relative-example1 > div:nth-of-type(2){
        background-color: aqua;
    }
    #relative-example1 > div:nth-of-type(3){
        background-color: yellowgreen;
    }
    #relative-example1 > div:nth-of-type(2){
        position: relative;
        top: 10px;
        left: 10px;
    }
</style>
<div id="relative-example1">
    <div></div>
    <div></div>
    <div></div>
</div>

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。 直近の配置されている祖先があれば、それに対して相対配置されます。 そうでなければ、初期の包含ブロックに対して相対配置されます。 最終的な位置は top, right, bottom, left の値によって決定されます。

absolute

イメージとしては、指定要素から見て親要素を順に見ていき最初のpositionプロパティがrelativeの要素の左上を(0,0)として どこに配置するかを決めるときに使用します。

親要素にrelativeを適用し、２つ目の子要素にabsoluteを適用し上から(10px, 10px)ずらした位置に表示するようにしました。

その結果親要素の左上を起点として(10px, 10px)の位置に表示されています。

<style>
    #absolute-example1{
        padding: 5px;
        width: calc(100% - 10px);
        height:calc(100% - 10px);
    }
    #absolute-example1 > div{
        padding: 5px;
        width: 100px;
        height:100px;
    }
    
    #absolute-example1 > div:nth-of-type(1){
        background-color: yellow;
    }
    #absolute-example1 > div:nth-of-type(2){
        background-color: aqua;
    }
    #absolute-example1 > div:nth-of-type(3){
        background-color: yellowgreen;
    }
    #absolute-example1{
        position: relative;
    }
    #absolute-example1 > div:nth-of-type(2){
        position: absolute;
        top: 10px;
        left: 10px;
    }
</style>
<div id="absolute-example1">
    <div></div>
    <div></div>
    <div></div>
</div>

fixed

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。 ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 (なお、包含ブロック形成に寄与している perspective と filter に矛盾のあるブラウザーがあります。) 最終的な位置は top, right, bottom, left の値によって決定されます。

sticky

要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置されます。 オフセットは他の要素の配置には影響を与えません。

最後に

位置指定はWEB開発で必須となるものです。色々試して確実にに身につけましょう。