web-dev-qa-db-ja.com

予期しない結果をもたらすパーセンテージによる絶対的なポジショニング

このhtmlコードを含む this jsfiddle を検討してください：

<div id="container">
  <div id="item">TEST</div>
</div>

そしていくつかのCSS：

#container {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

#item {
  border: 1px dashed purple;
  position: absolute;
  left: 50%;
}

結果は私を驚かせます。 W3ポジショニングプロップ を見ると、#itemの左側の値は「含まれているブロック」の50％、つまり#containerであると思います。ただし、 ブロックを含む だけでなく、ページ全体の50％にあるようです。さらに驚くべきことに、コンテナのオーバーフローを非表示のままにするように指示すると、「テスト」は引き続き存在します。

すべての主要なブラウザー（IE9を含む）は同じ動作を示すように見えるので、私の期待はおそらく間違っています。 問題は：仕様のどの部分がこの動作を説明しているのか、もしあれば？

htmlcsspositioningcss-position
16
Jeroen

絶対位置は、位置が静的ではない次の親要素を基準にして適用されます。あなたの場合、それは全ページです。コンテナ部門でposition: relativeを設定してみてください。
jsFiddleを参照してください。

参照：W3C --10.1-「含むブロック」の定義

33
animuson

追加

position:relative;

コンテナdivへ。

3
mohsen dorparasti