绝对忽略父级填充

Question

我正在使用bootstrap，我正在尝试在右侧创建我自己的下拉菜单。

我在css下面试过。但它忽略了父母填充。但是当我使用position : relative它的工作正常但它将文本内容推下来。所以我想要绝对覆盖，但也保留父填充。

.menu
{
  background:#ccc;
  top: 50px;
  right: 0px;
  position: absolute;
  clear: both;
}

这是html的小提琴 - http://jsfiddle.net/97bqun6s/

P.s：我的父亲是bootstrap .container类，其填充因屏幕大小而异。

Answer 1

在元素上使用position: absolute时，该元素将位于其最近的“非静态”父容器的内容区域和填充框中。您可以参考Box Model作为参考。

一个简单的解决方案就是说right: 15px。这将从右侧偏移侧导航以与容器的其余部分对齐。

请参阅此jsFiddle

编辑：

由于容器的填充是可变的，因此这可能不是一个可行的解决方案。

您可以在容器

中添加包装器div

<div class="container">
    <div class="content-wrap">
        ...
    </div>
</div>

并将其定位为相对。

 .content-wrap {
    position: relative;
 }

查看更新的jsFiddle