html - 绝对定位和百分比高度

Question

请参考http://jsfiddle.net/A2Qnx/1/

<div id='w'>
   <div id='p'>
       <div id='c'>
       </div>
   </div>
</div>

当绝对定位打开时，div P 的高度为 60px（50 来自父级 + 10 来自 padding）。

现在，如果您关闭绝对定位，div P 和 div W 将具有相同的 110px 高度（100 来自子级 + 10 来自填充）。

有人可以向我解释这里发生了什么吗？

1）当绝对定位打开时，为什么 P 从父级的最小高度而不是子级的高度取其 100% 的高度？（为什么填充只适用于 P？）

2）当绝对定位关闭时，为什么 P 取其 100% 高度来自子代而不是父代的最小高度？（为什么填充只适用于 P 和 W？）

Answer 1

填充仅用于#p...

至于高度，绝对定位使元素脱离正常流程。高度 o 100% 使该元素占据任何父级的完整高度，其位置不是静态的（如果没有找到，则为主体）。由于它不在流中，因此该#w元素实际上没有任何元素，因此它恢复到其最小高度。