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.

You could also wrap the
in another div with the absolute position and a width of 100%. This will get you the benefit of the layered content and the benefit of bootstraps container class css — Matt, Aug 26 '15 at 19:34

jrarama · Accepted Answer · 2015-01-26T06:49:20.037

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

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. — jrarama, Jan 26 '15 at 06:52

score 0 · Answer 2 · answered May 26 '23 at 11:43

This is an old question, but for the record:

You can use justify-content class, e.g.:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-md-6">
      [YOUR CONTENT]
    </div>
  </div>
</div>

Check the flex part in the bootstrap documentation for more info and examples.

Bootstrap container with position:absolute loses layout inside

2 Answers2

Linked