「position: static」は相対位置指定ではない？


**「positionプロパティを指定しない時に適用される初期値static」は相対位置指定だろうと思い、仕様を確認しているのですが、見つけることが出来ません。**

* * *

**リンク先では下記のように記載されていますが、どういう意味でしょうか？**

> 規定の振る舞いです。フロー内の現在の位置に配置されます

<https://developer.mozilla.org/ja/docs/Web/CSS/position>

* * *

**リンクページ下の方で4つに分類していますが、「position: static」はどこに該当するのでしょうか？ その他？**  
・相対位置指定  
・絶対位置指定  
・固定位置指定  
・Sticky 位置指定




通常フロー、つまり基本のルール通りにレイアウトを行い、 **位置指定をしない** のが `position: static`
です。それに反して位置指定を行うのが `position: relative` やその他の設定値です。

[そのMDN記事](https://developer.mozilla.org/ja/docs/Web/CSS/position)の冒頭に以下の記述がありますが、staticはここに含まれていないですよね。

> 位置指定された要素 (positioned element) とは、計算された position プロパティが relative 、absolute
> 、fixed、sticky のいずれかである要素です。

記事の後半にある4つの見出しは分類しているわけではなく、通常と異なる位置指定について解説しているだけです。

* * *

relative は static を基準に位置を指定するものですから、オフセットを指定しなければ static
と同じ位置にレイアウトされます。とはいえ、位置指定されているという違いがあります。

例えば以下のサンプルを比べると、relative を指定した要素の位置は同じですが、その中にある absolute
を指定した要素の位置が変わっています。absolute が指定された要素は、位置指定された祖先要素を基準にレイアウトされるからです。

[code]

    <div style="border-left: 1em solid #faf; height: 3em">
      <div id="foo" style="position: relative">
        relative
        <div id="bar" style="position: absolute; left: 0">
          absolute
        </div>
      </div>
    </div>
[/code]

[code]

    <div style="border-left: 1em solid #faf; height: 3em">
      <div id="foo" style="position: static">
        static
        <div id="bar" style="position: absolute; left: 0">
          absolute
        </div>
      </div>
    </div>
[/code]




通常フロー、つまり基本のルール通りにレイアウトを行い、 **位置指定をしない** のが `position: static`
です。それに反して位置指定を行うのが `position: relative` やその他の設定値です。

[そのMDN記事](https://developer.mozilla.org/ja/docs/Web/CSS/position)の冒頭に以下の記述がありますが、staticはここに含まれていないですよね。

> 位置指定された要素 (positioned element) とは、計算された position プロパティが relative 、absolute
> 、fixed、sticky のいずれかである要素です。

記事の後半にある4つの見出しは分類しているわけではなく、通常と異なる位置指定について解説しているだけです。

* * *

relative は static を基準に位置を指定するものですから、オフセットを指定しなければ static
と同じ位置にレイアウトされます。とはいえ、位置指定されているという違いがあります。

例えば以下のサンプルを比べると、relative を指定した要素の位置は同じですが、その中にある absolute
を指定した要素の位置が変わっています。absolute が指定された要素は、位置指定された祖先要素を基準にレイアウトされるからです。

[code]

    <div style="border-left: 1em solid #faf; height: 3em">
      <div id="foo" style="position: relative">
        relative
        <div id="bar" style="position: absolute; left: 0">
          absolute
        </div>
      </div>
    </div>
[/code]

[code]

    <div style="border-left: 1em solid #faf; height: 3em">
      <div id="foo" style="position: static">
        static
        <div id="bar" style="position: absolute; left: 0">
          absolute
        </div>
      </div>
    </div>
[/code]

