如何在使用引导时防止绝对位置重叠？

Question

我需要显示每个div，没有任何重叠，主div使用引导col-*，这个div包含有absolute位置的其他div，需要清楚，我不能更改 divs之外的任何div的高度和宽度(这意味着仍然可以使用100%或auto的宽度、高度)。

这是小提琴：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>

​

正如您在代码段中看到的那样，两个.region在响应上相互连接，不应该重叠，我如何解决这个问题？

Answer 1

两个.elements需要显示:块并具有指定的宽度/高度，这样才能相互浮动：

看看我的小提琴：https://jsfiddle.net/Lmt1u1uw/7/

这应该能起作用。