На отображение абсолютно позиционируемого элемента влияет его родитель

[clavin]

Столкнулся с такой особенностью, что если взять элемент и абсолютно его спозиционировать с помощью position:absolute;, то отображение этого элемента будет зависеть от того, каким является его родитель.

Так если есть два элемента

<div class="outside">
<div class="inside">text</div>
</div>

и внутреннему назначить position:absolute;, то если внешний элемент будет иметь свойство display:block;, то его отображение будет таким.

Если же внешнему элементу назначить свойство display:inline; или display:inline-block;, то его отображение будет другим. Внутренний элемент с классом "inside" может, кстати, иметь любой display, но это не повлияет на всю картину.

Есть ли какое-нибудь разумное объяснение этому?

[SelenIT]

Насколько я понимаю, дело в разной ширине containing block'а, от которого пляшет вычисление ширины абсолюта. У блочного родителя это "во весь контейнер", а у инлайнового (а также табличного и плавающего) — ширина обычного контента, в данном случае — ноль. Поэтому во втором примере абсолют и ужимается до предела.

[clavin]

Насколько я понимаю, дело в разной ширине containing block'а, от которого пляшет вычисление ширины абсолюта. У блочного родителя это "во весь контейнер", а у инлайнового (а также табличного и плавающего) — ширина обычного контента, в данном случае — ноль. Поэтому во втором примере абсолют и ужимается до предела.

Где вы там такое прочитали? Если можно цитату приведите, а то я в этом раздел спецификации не шарю совсем.

Если к внешнему тегу добавить padding:20px;, то всё становится более нагляднее.

Edited April 26, 2012 by clavin

[SelenIT]

Полагаю, ключевая фраза там

The constraint that determines the used values for these elements is:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

И описывается алгоритм, как эта ширина учитывается. Дальше вступает в силу ширина самого containing block-а (т.е. для абсолютов, по определению, предка с relative) — для display: block это п. 10.3.3 спеки, для инлайн-блоков — п. 10.3.9, и т.д.