title: Bootstrap container with position:absolute loses layout inside
body: <p>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.</p>
  
  <p>To position <strong>.container-fluid</strong> on top of other containers, I need to remove it from standard flow. So need to use <strong>position:absolute</strong>. As soon as I apply this to <strong>.container-fluid</strong> (or wrappers around it), it loses 100% width and whole layout inside gets lost.</p>
  
  <p>If I remove <strong>position:absolute</strong> from <strong>.container-fluid</strong> (<strong>#menu</strong> in my case), it gets back layout, but is not removed from standard flow.</p>
  
  <p>JSFiddle with only this case: <a href="http://jsfiddle.net/q6v9wv31/" rel="noreferrer">http://jsfiddle.net/q6v9wv31/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container first"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;p&gt;Content here&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container ontop"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;p&gt;Menu Item 1&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-6"&gt;
              &lt;p&gt;Menu Item 2&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      margin: 10px;
  }
  .first {
      height: 200px;
      background-color: #ddd;
  }
  .ontop {
      height: 100px;
      background-color: #d00;
      position: absolute;
      top: 100px;
  }
  </code></pre>
  
  <p>Current version of project: <a href="http://html.accuraten.com/ssc-html-dev/public/" rel="noreferrer">http://html.accuraten.com/ssc-html-dev/public/</a></p>
  
  <p>Please help me understand, how to solve this task.</p>