Абсолютное позиционирование с процентами, дающими неожиданные результаты

Question

Пожалуйста, рассмотрите этот jsfiddle , содержащий этот HTML-код:

<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), похоже, демонстрируют одинаковое поведение, поэтому мои ожидания, вероятно, неверны. Тогда возникает вопрос: : Какая часть спецификации объясняет это поведение, если оно есть?

Answer 1

Абсолютное позиционирование применяется относительно следующего родительского элемента, позиция которого не является статической. В вашем случае это полная страница. Попробуйте установить position: relative в разделе контейнера.
См. JsFiddle.

См .: W3C - 10.1 - Определение "содержащего блока"

Answer 2

добавить

position:relative; 

до контейнера div.

Answer 3

При задании абсолютной позиции элемента вы вынимаете его из нормального потока документа. Абсолют - это самая верхняя левая часть экрана независимо от других элементов на странице. Таким образом, говоря слева: 50% вы говорите на полпути от абсолютной левой части экрана.