32019


**CSSのposition:relativeを学習しているのですが、下記コードで「left%だけが効いて、top%が効かない」のはなぜでしょうか？**  
・ちなみに、topをpx指定へ変更すると効きます  
※具体的に何をやりたいのか、というのはなく、単に疑問に思ったので質問しました

[code]

    div {
      width: 200px;
      height: 200px;
    }
    #t1 {
      background-color: gray;
    }
    #t2 {
      position: relative;
      top: 50%;
      left: 50%;
      background-color: orange;
    }
[/code]

[code]

    <body>
      <div id="t1"></div>
      <div id="t2"></div>
    </body>
[/code]


CC BY-SA 3.0
2017-01-20T04:57:33.440
32010
2017-01-21T13:39:54.790
2017-01-20T15:38:01.383
3054
7886
question
css
CSSのposition:relativeで、left%だけが効いて、top%が効かないのはなぜ？ topをpx指定にすると効きます


`position: absolute`を使うべきです。

[code]

    div{
      width:200px;
      height:200px;
    }
    #t1{
      background-color:gray;
    }
    #t2{
      position:absolute;
      top:50%;
      left:50%;
      background-color:orange;
    }
[/code]

[code]

    <body>
    　<div id="t1"></div>
    　<div id="t2"></div>
    </body>
[/code]


CC BY-SA 3.0
2017-01-20T05:29:20.790
32013
2017-01-20T05:29:20.790
20309
32010
answer


`<!DOCTYPE html>`などの宣言を行なわない奇癖（互換）モードの HTML では、

chrome :効く  
firefox :効かない  
IE :効かない

といった状況でした。  
エンジン毎の解釈の差異かと思いますが（[奇癖モードでは `body` の高さが `100vh`
になり](https://quirks.spec.whatwg.org/#the-html-element-fills-the-viewport-
quirk)）効くのが正解な気がしますね。。。


CC BY-SA 3.0
2017-01-20T05:36:02.357
32014
2017-01-20T16:42:23.007
2017-01-20T16:42:23.007
3054
19716
32010
answer


HTML / CSSでは子要素のサイズが確定しないことには親要素のサイズを決定できません。そのため親要素を`height:
0px`と仮定してレイアウトされたために子要素の`top: 50%`も`0px`として扱われたのでしょう。

[code]

    body { height: 300px; }
    
[/code]

のように明示的な指定があれば、子要素の`top: 50%`も効きます。  
`left: 50%`が効く理由も同様に親要素が`width:
100%`を仮定されているためです。子がインライン要素の場合に横幅いっぱいに敷き詰められてから折り返されるのもこのためです。

* * *

各ブラウザーは通常は標準準拠モードで動作しますが、古いhtmlを正常に表示するために互換モード（Quirksモード）を持っている場合があります。H.Mayuさん及びmjyさんが言及されていますが、Google
Chromeの場合、html先頭に`<!DOCTYPE
html>`宣言がなされていないと互換モードに切り替わり、今回のように`height`の仮定される値が変わるようです。

なお、Internet Explorer 10以降のように`<!DOCTYPE
html>`宣言がなされていなくても互換モードに切り替わらないブラウザーもありますし、互換モードによってどのような違いが生じるかもまちまちですので、互換モードの使用は避け、そのためにも必ず`<!DOCTYPE
html>`宣言を付けることをお勧めします。


CC BY-SA 3.0
2017-01-20T07:45:16.477
32019
2017-01-21T13:39:54.790
2017-01-21T13:39:54.790
4236
4236
32010
answer