Загрузочный контейнер с позицией: абсолютная потеря макета внутри

Я разрабатываю веб-сайт с последней версией 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/

Пожалуйста, помогите мне понять, как решить эту задачу.

Ответ 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 до 10 пикселей, если вы хотите, чтобы он имел тот же самый запас, что и первый контейнер.

Элемент, который позиционируется как абсолютный, не получает никакого пространства в документе. Это означает, что после позиционирования он не оставляет пустого пространства. После этого вы можете использовать свойства слева, справа, сверху и снизу, чтобы поместить окно.

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