How can I prevent absolute position from overlapping while using bootstrap? - html

Question

I need to display each div without any overlaps, the main div is using bootstrap col-*, this same div contains other divs with absolute position, I need to be clear that I cannot altern the height and the width of any div outside .element divs (which means width, height of 100% or auto can still be used).
Here's the fiddle : https://jsfiddle.net/Lmt1u1uw/6/
.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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="region col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="layout layout-1">
<div class="elements">
<div class="element background"></div>
<div class="element text">Magic soak into my spine.</div>
</div>
</div>
</div>
<div class="region col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="layout layout-2">
<div class="elements">
<div class="element background"></div>
<div class="element text">The dreams maker gonna make you mad.</div>
</div>
</div>
</div>
As you can see in the snippet the two .region are on top of each other on responsive and shouldn't overlap, how can I fix this ?

Answer 1

The two .elements need to be display:block and have a specified width/height in order to float around each other:
have a look a my fiddle here:
https://jsfiddle.net/Lmt1u1uw/7/
This should do the trick.