具有位置的引导容器：绝对在内部丢失布局

Question

我正在针对最新的 Bootstrap 版本 3.3.2 开发网站。我的任务是创建位于其他内容之上的导航（悬停时的简单翻转菜单）。对于这个菜单，我想使用 Bootstrap 列。

要将 .container-fluid 放置在其他容器之上，我需要将其从标准流程中移除。所以需要使用position:absolute。一旦我将它应用到 .container-fluid（或围绕它的包装器），它就会失去 100% 的宽度，并且内部的整个布局都会丢失。

如果我从 .container-fluid 中删除 position:absolute （在我的例子中是 #menu ），它会返回布局，但是未从标准流程中删除。

JSFiddle 只有这种情况：http://jsfiddle.net/q6v9wv31/

HTML：

<div class="container first">
    <div class="row">
        <div class="col-xs-12">
            <p>Content here</p>
        </div>
    </div>
</div>
<div class="container ontop">
    <div class="row">
        <div class="col-xs-6">
            <p>Menu Item 1</p>
        </div>
        <div class="col-xs-6">
            <p>Menu Item 2</p>
        </div>
    </div>
</div>

CSS：

body {
    margin: 10px;
}
.first {
    height: 200px;
    background-color: #ddd;
}
.ontop {
    height: 100px;
    background-color: #d00;
    position: absolute;
    top: 100px;
}

项目当前版本：http://html.accuraten.com/ssc-html-dev/public/

请帮助我理解，如何解决这个任务。

Answer 1

如果要将位置设置为绝对位置并希望其具有 100% 的宽度，则应设置左右 CSS 样式：

HTML：

<div class="container first">
    <div class="row">
        <div class="col-xs-12">
            <p>Content here</p>
        </div>
    </div>
</div>
<div class="ontop container">
    <div class="row">
        <div class="col-xs-4">
            <p>Menu Item 1</p>
        </div>
        <div class="col-xs-4">
            <p>Menu Item 2</p>
        </div>
        <div class="col-xs-4">
            <p>Menu Item 2</p>
        </div>
    </div>
</div>

CSS：

body {
    margin: 10px;
}
.first {
    height: 200px;
    background-color: #ddd;
}
.ontop {
    height: 100px;
    background-color: #d00;
    position: absolute;
    top: 100px;
    right: 0;
    left: 0;
}

如果您希望它与第一个容器具有相同的边距，请将左：0 和右：0 更改为 10px。

绝对定位的元素不会在文档中获得任何空间。这意味着它在定位后不会留下空白空间。随后可以使用属性 left、right、top 和 bottom 来放置框。

http://html.net/tutorials/css/lesson14.php#s2