title: How can I prevent absolute position from overlapping while using bootstrap?
body: <p>I need to display each div without any overlaps, the main div is using bootstrap <code>col-*</code>, this same div contains other divs with <code>absolute</code> position, <strong>I need to be clear that I cannot altern the height and the width of any div outside <code>.element</code> divs</strong> (which means width, height of <code>100%</code> or <code>auto</code> can still be used).</p>
  
  <p>Here's the fiddle : <a href="https://jsfiddle.net/Lmt1u1uw/6/" rel="nofollow noreferrer">https://jsfiddle.net/Lmt1u1uw/6/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.layout {
    position: relative;
  }
  
  .element,
  .elements {
    position: absolute;
  }
  
  .layout-1 .background {
    background: #4dadc9;
    width: 600px;
    height: 400px;
  }
  
  .layout-1 .text {
    transform: translate(30px, 60px);
    color: #ffffff;
    width: 200px;
  }
  
  .layout-2 .background {
    background: red;
    width: 600px;
    height: 400px;
  }
  
  .layout-2 .text {
    transform: translate(170px, 200px);
    color: #ffffff;
    width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="region col-lg-6 col-md-6 col-sm-12 col-xs-12"&gt;
    &lt;div class="layout layout-1"&gt;
      &lt;div class="elements"&gt;
        &lt;div class="element background"&gt;&lt;/div&gt;
        &lt;div class="element text"&gt;Magic soak into my spine.&lt;/div&gt; 
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="region col-lg-6 col-md-6 col-sm-12 col-xs-12"&gt;
    &lt;div class="layout layout-2"&gt;
      &lt;div class="elements"&gt;
        &lt;div class="element background"&gt;&lt;/div&gt;
        &lt;div class="element text"&gt;The dreams maker gonna make you mad.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see in the snippet the two <code>.region</code> are on top of each other on responsive and shouldn't overlap, how can I fix this ?</p>