2

我很难理解为什么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值为默认值（即）时，即使子元素是绝对定位的，它的position: static;宽度也会随着.#child#childposition: absolute;

一切都到位，当我使用position: relative;时，#parent即它的宽度保持不变，无论#child.

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

更新：我创建了一个小提琴来更好地解释我的观点。请看一看。

重现问题的步骤：

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

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

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

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

截屏

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

现在，申请position: relative;（li即li.float-left.top-menu { position: relative; }自己看看差异。）

4

2 回答 2

3

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

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

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

于 2012-12-20T15:27:05.427 回答
0

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

并且必须阅读：相对定位内的绝对定位（还有这个评论和这个答案）。

于 2012-12-20T16:46:30.063 回答