html - 绝对忽略父填充

Question

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

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

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

这是 html 的 fiddle - http://jsfiddle.net/97bqun6s/

P.s:我的 parent 是 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