Question

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

示例HTML代码：

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

考虑代码表示水平菜单。看起来有点像这样：

screenshot

问题是position #parent属性的值是默认值（即position: static;），其宽度随着{的宽度增加{1}}尽管子元素是绝对定位的，但由于#child #child现在position: absolute;已不在流量范围内，因此不应该这样做。

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

我在这里缺少什么？为什么我需要使用position: relative;作为（我认为）应该是默认行为的东西？

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

重现问题的步骤：

在小提琴的预览中，点击“频道”菜单，该菜单应滑出其隐藏的菜单项。
现在，在浏览器中点击 F12 键（安装了Firebug的Chrome，Safari或Firefox），使用检查工具检查“频道”菜单。

这应该立即指向现在打开的Dev Tools或Firebug窗格的“Elements”选项卡中的相关HTML代码。

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

为什么蓝色指示框（即菜单）的大小应该是红色边框的大小？了解我现在所说的内容？

现在，在position: relative;上应用li（即li.float-left.top-menu { position: relative; }并自行查看差异。）

Answer 1

position:relative创建一个新的包含框，任何绝对定位的子元素将从中设置其相对的顶部/左侧。

position: static将不会创建一个包含框，并且任何绝对定位的子元素将开始沿着DOM树向上查找一个包含框，直到它到达正文并使用它找到的顶部/左边的祖先

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

Answer 2

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