我需要显示每个div,没有任何重叠,主div使用引导
col-*
,此同一div包含其他具有
absolute
我需要明确的是,我不能改变外面任何div的高度和宽度
.element
分区
(即宽度、高度
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
在响应上相互重叠,不应该重叠,我如何解决这个问题?
