Bootstrap container with position:absolute loses layout inside

Question

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.

To position .container-fluid on 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.

If I remove position:absolute from .container-fluid (#menu in my case), it gets back layout, but is not removed from standard flow.

JSFiddle with only this case: 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;
}

Current version of project: http://html.accuraten.com/ssc-html-dev/public/

Please help me understand, how to solve this task.

Solution

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:

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;
}

Change left: 0 and right: 0 to 10px if you want it to have the same margin as the first container.

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.

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

Comments

[jrarama]

The point of using position absolute is you want to position an element absolutely. That's why you need to specify top, left, right/width, bottom/height.

[Shamseer Ahammed]

You saved my day bro !