为什么在Bootstrap Navbar中向下移动菜单元素时绝对定位不起作用？

Question

我有一个Bootstrap Navbar，右边有两个菜单元素：

关键是我希望这些元素与条形的下边界对齐，我更喜欢使用绝对定位而不是使用它们的填充和边距。正如您在下面的Firebug屏幕截图中看到的那些菜单项是div的子项，它涵盖了我想要定位它们的精确区域（对于那些不熟悉firebug的人来说，蓝色区域对应于带下划线的代码的浏览器位置）：

现在，我的问题是，为什么添加css .nav.navbar-nav.navbar-right{ position: absolute; bottom: 0px; right: 0px; width: 230px; }会导致菜单元素进一步移动到其父级区域的右侧？ 我希望它们只会向下移动，而不是正确。（结果如下所示，萤火虫仍然影响其父位置。）

免责声明：正如您可以查看下面（另一个firebug屏幕截图）.nav.navbar-nav.navbar-right确实对应于之前带下划线的div的孩子：

奖励：不使用填充和边距向下移动这些菜单元素并将其保留在其父级区域内的任何帮助都将不胜感激。

Answer 1

绝对定位元素通常不受任何其他元素的影响。要使其正常工作，请为父元素指定position: relative;。

.navbar-collapse {
    position: relative;
}

然后绝对定位元素依赖于其父元素。