Div块宽度不占用嵌套div标签中的整个块，具有绝对位置

Question

请查看此示例http://jsfiddle.net/xcYum/1/

1. 我想知道为什么div标签（带有class = progress）内容被分为两行而不是一行（即你的进度与你的进度）。我不需要指定'div class = progress'的宽度。你可以给我一个解释，其中包含所有css和/或html元素类型（或任何原因的拳击）吗？我只是想知道规则究竟是如何工作的，而不是记住它工作或不工作的情况。

2. 似乎我将.container css更改为以下内容： 。容器 {     位置：相对;  } 然后div标签（带有class = progress）现在以单行显示，为什么相对和绝对会产生这样的差异？或者是因为它是嵌套的？

3. 我们如何避免嵌套的绝对定位div标签？拥有这样的结构是错误的还是坏的做法。我在这个例子中使用它是因为我想要  '100％'和'你的进度'基于'div class = container'标签定位，然后我可以移动'div class = container'标签。换句话说，这样做，我可以移动一件事（'div class = container'标签）来移动两件事（100％和'你的进步'），反之亦然。我的思考过程出了什么问题？

Answer 1

1. 因为绝对定位的元素收缩包裹，换句话说，它变得尽可能小。您可以使用white-space: nowrap

强制文本永不换行

2. 不确定为什么会发生这种情况

3. 您不需要绝对定位子元素与父元素一起移动

Answer 2

1. 绝对元素为正常流子元素以及position属性设置为绝对值的后代建立一个新的包含块。

   参考：http://reference.sitepoint.com/css/absolutepositioning

2. 与第一个答案相同

3. 绝对元素相对于其包含块定位。所以，你只需要一个父'div class = container'来获得相对位置，然后所有具有绝对位置的元素都会随之移动。

   参考：http://reference.sitepoint.com/css/absolutepositioning