css - '位置: static ;' vs ' position: relative;' when child element is absolutely positioned

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>

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

问题 是当 position 的值时#parent的属性(property)是默认的(即 position: static; )，它的宽度随着 #child 的宽度而增加即使子元素是绝对定位的，也不应该像 #child 那样发生。由于 position: absolute; 现在不在流程中.

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

我在这里错过了什么？为什么我需要使用 position: relative;对于某些(我认为)应该是默认行为的东西？

更新:我创建了一个 fiddle 来更好地解释我的观点。 Please take a look .

重现问题的步骤:

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

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

  这应该立即将您指向现在打开的开发工具或 Firebug Pane 的“元素”选项卡中的相关 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 树向上寻找一个包含框，直到它碰到 body 并使用它找到的祖先顶部/左侧。

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