25363


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

* * *

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

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

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

* * *

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


CC BY-SA 3.0
2016-06-01T04:27:48.370
25351
2016-06-01T15:00:24.200
7886
question
css
「position: static」は相対位置指定ではない？


そもそも「相対位置」というからには基準となる位置が存在します。つまり`position: relative`は`position:
static`の位置からの相対位置です。


CC BY-SA 3.0
2016-06-01T04:37:24.643
25352
2016-06-01T04:37:24.643
4236
25351
answer


どれにも当てはまらないのでは？  
"位置を指定しない"のが`position:static`なのだからどの位置指定にも当てはまりません。

また、`static(静的)`の名前が示す通り、  
staticを指定すると位置を指定することが出来なくなるので初期位置から動きません。  
初期位置とは記載位置より前のElementの表示位置を計算し終えた後に最初に表示する位置です。

また、相対位置を指定する`position:relative`と`position:static`は異なるものです。  
`position:relative` ≠ `position:static`

表示のされ方については[こちら](http://www.htmq.com/style/position.shtml)のほうが、見やすいかもしれません。


CC BY-SA 3.0
2016-06-01T04:53:25.727
25353
2016-06-01T04:53:25.727
25351
answer


通常フロー、つまり基本のルール通りにレイアウトを行い、 **位置指定をしない** のが `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]


CC BY-SA 3.0
2016-06-01T15:00:24.200
25363
2016-06-01T15:00:24.200
8000
25351
answer