html - How can I prevent absolute position from overlapping while using bootstrap? -
i need display each div without overlaps, main div using bootstrap col-*
, same div contains other divs absolute
position, i need clear cannot altern height , width of div outside .element
divs (which means width, height of 100%
or auto
can still used).
here's 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 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 mad.</div> </div> </div> </div>
as can see in snippet 2 .region
on top of each other on responsive , shouldn't overlap, how can fix ?
the 2 .elements
need display:block , have specified width/height in order float around each other:
have fiddle here: https://jsfiddle.net/lmt1u1uw/7/
this should trick.
Comments
Post a Comment