Я разрабатываю веб-сайт с последней версией Bootstrap версии 3.3.2. Моя задача - создать навигацию, которая позиционируется поверх другого содержимого (простое перелистывание меню при наведении). Для этого меню я хочу использовать столбцы Bootstrap.
Чтобы расположить .container-fluid поверх других контейнеров, мне нужно удалить его из стандартного потока. Поэтому нужно использовать позицию: absolute. Как только я применил это к .container-fluid (или оберткам вокруг него), он теряет 100% ширину, и весь макет внутри теряется.
Если я удалю position: absolute из .container-fluid ( #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/
Пожалуйста, помогите мне понять, как решить эту задачу.