'位置：静态;' vs'位置：相对；'当子元素绝对定位时

Question

我很难理解为什么当容器元素的子元素被绝对定位（即position: absolute;）时，我需要为其添加position: relative;。让我举例说明。

示例 HTML 代码：

<ul>
   <li>...</li>
   <li id="parent">
      <a href="#">Menu</a>
      <div id="child">...</div>
   </li>
   <li>...</li>
   <li>...</li>
</ul>

假设代码代表一个水平菜单。看起来有点像这样：

问题是当#parent的position属性的值是默认值（即position: static;）时，它的宽度随着#child的宽度而增加，即使是孩子元素是绝对定位的，这不应该发生，因为#child 现在由于position: absolute; 而不在流程中。

当我在#parent 上使用position: relative; 时，一切都已到位，即无论#child 的大小如何，它的宽度都保持不变。

我在这里缺少什么？为什么我需要将position: relative; 用于（我认为）应该是默认行为的事情？

更新：我创建了一个小提琴来更好地解释我的观点。 Please take a look.

重现问题的步骤：

• 在小提琴的预览中，点击“Channels”菜单，它应该会滑出其隐藏的菜单项。

• 现在，在您的浏览器（安装了 Firebug 的 Chrome、Safari 或 Firefox）中按 F12 键，使用检查工具检查“频道”菜单。

  这应该立即将您指向现在打开的开发工具或 Firebug 窗格的“元素”选项卡中的相关 HTML 代码。

  在<ul id="top-navbar"> 中查找<li class="float-left top-menu"> 的第一个实例，并将鼠标悬停在该行上。它应该向您显示如下内容：

为什么蓝色指示框（即菜单）应该是红色边框的大小时却那么大？明白我现在在说什么了吗？

现在，在li 上应用position: relative;（即li.float-left.top-menu { position: relative; }，您自己看看有什么不同。）

Answer 1

position:relative 创建一个新的包含框，任何绝对定位的子元素都将从中设置它们的上/左相对位置。

position: static 不会创建包含框，并且任何绝对定位的子元素将开始沿着 DOM 树向上查找包含框，直到它碰到主体并使用它找到的祖先作为顶部/左侧。

编辑：抱歉，我误读了您的问题。我似乎无法重现您对问题的描述（请参阅fiddle）。您能否将代码发布为您问题的最小测试用例。

Answer 2

好的。我现在觉得很傻。我在子元素上使用了min-width，并且由于宽度几乎已定义，因此菜单（即父级）的宽度也扩展了。删除min-width 清除所有疑虑。

还有一个必读：Absolute Positioning Inside Relative Positioning（还有this comment 和this answer）。