1

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

div {
  width: 200px;
  height: 200px;
}
#t1 {
  background-color: gray;
}
#t2 {
  position: relative;
  top: 50%;
  left: 50%;
  background-color: orange;
}
<body>
  <div id="t1"></div>
  <div id="t2"></div>
</body>

3 件の回答 3

9

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

body { height: 300px; }

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


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

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

1
  • 『親要素widthを指定していないのに「left%」だけ効くのはなぜだろう?』という疑問は残るのですが、何れにしても回答いただいた内容のとおりだと思うので、これから%指定する際は、明示的に親要素にサイズ指定していこうと思います
    – re9
    Commented 2017年1月21日 3:33
2

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

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

といった状況でした。
エンジン毎の解釈の差異かと思いますが(奇癖モードでは body の高さが 100vh になり)効くのが正解な気がしますね。。。

5
  • 同じく55.0.2883.87 m (64-bit)ですが、やはり作用しているように思えます。質問者様のtop n%の部分を変化させることでt2の位置が変化しますし、位置も「t1のbottomの位置 + windowサイズのn%分の位置」に表示されます。IE等はt1のbottomの位置にt2が表示されます。
    – H.H
    Commented 2017年1月20日 14:35
  • 質問者様が貼ったsourceをそのままtextに貼っているだけなのですが・・・ブラウザのWindowの大きさを変化させるとt2の位置も変化します。なにかPC固有の物が作用していると思い別PCでも試しましたが同様の結果でした・・・
    – H.H
    Commented 2017年1月20日 15:31
  • 更新ありがとうございます。スニペット内ではtopが効いていないようにみえます。また私が試していたときは質問者様のコードをそのままtextに貼っていたのですが、スニペット内のコードをtextに張り付けて表示させても効きませんでした。切り分けしてみたところ<!DOCTYPE html>の有無で結果が変わりました・・・
    – H.H
    Commented 2017年1月20日 15:43
  • 有用な情報だと思いましたので、勝手ながら回答に反映させていただきました。不都合な点があれば適宜ロールバックして下さい。
    – mjy
    Commented 2017年1月20日 16:39
  • (仕様はともかく現実問題として、)「body の高さ」に対する解釈はブラウザ毎に結構異なるのですね。対応が難しいので、これから%指定する際は、明示的に親要素にサイズ指定していこうと思いました
    – re9
    Commented 2017年1月21日 3:39
0

position: absoluteを使うべきです。

div{
  width:200px;
  height:200px;
}
#t1{
  background-color:gray;
}
#t2{
  position:absolute;
  top:50%;
  left:50%;
  background-color:orange;
}
<body>
 <div id="t1"></div>
 <div id="t2"></div>
</body>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。