CSS 带有位置的 Bootstrap 容器：absolute 丢失内部布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28144233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap container with position:absolute loses layout inside
提问by dandaka
I am developing website against latest Bootstrap version 3.3.2. My task is to create navigation, that is positioned on top of other content (simple roll over menu on hover). For this menu I want to use Bootstrap columns.
我正在针对最新的 Bootstrap 3.3.2 版开发网站。我的任务是创建导航，它位于其他内容的顶部（悬停时的简单滚动菜单）。对于这个菜单，我想使用 Bootstrap 列。
To position .container-fluidon top of other containers, I need to remove it from standard flow. So need to use position:absolute. As soon as I apply this to .container-fluid(or wrappers around it), it loses 100% width and whole layout inside gets lost.
要将.container-fluid定位在其他容器的顶部，我需要将其从标准流中移除。所以需要使用position:absolute。一旦我将它应用到.container-fluid（或它周围的包装器），它就会失去 100% 的宽度，并且里面的整个布局都会丢失。
If I remove position:absolutefrom .container-fluid(#menuin my case), it gets back layout, but is not removed from standard flow.
如果我删除的位置是：绝对从.container流体（#menu在我的情况），它回来布局，但不是从标准流程中删除。
JSFiddle with only this case: http://jsfiddle.net/q6v9wv31/
JSFiddle 只有这种情况：http: //jsfiddle.net/q6v9wv31/
HTML:
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:
CSS：
body {
margin: 10px;
}
.first {
height: 200px;
background-color: #ddd;
}
.ontop {
height: 100px;
background-color: #d00;
position: absolute;
top: 100px;
}
Current version of project: http://html.accuraten.com/ssc-html-dev/public/
当前项目版本：http: //html.accuraten.com/ssc-html-dev/public/
Please help me understand, how to solve this task.
请帮助我理解，如何解决这个任务。
回答by jrarama
If you want to set the position to absolute and want it to have 100% width, you should set the left and right CSS styles:
如果要将位置设置为绝对位置并希望它具有 100% 的宽度，则应设置左右 CSS 样式：
HTML:
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:
CSS：
body {
margin: 10px;
}
.first {
height: 200px;
background-color: #ddd;
}
.ontop {
height: 100px;
background-color: #d00;
position: absolute;
top: 100px;
right: 0;
left: 0;
}
Change left: 0 and right: 0 to 10px if you want it to have the same margin as the first container.
如果您希望它与第一个容器具有相同的边距，请将 left: 0 和 right: 0 更改为 10px。
An element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned. You can subsequently use the properties left, right, top, and bottom to place the box.
绝对定位的元素不会在文档中获得任何空间。这意味着它在定位后不会留下空白空间。随后您可以使用属性 left、right、top 和 bottom 来放置框。
