blob: b435937bff1c3d87b2372359a2e3b586ae728608 [file] [log] [blame] [edit]
<style>
.container {
margin-bottom: 10px;
outline: 1px solid black;
width: 150px;
position: relative;
margin-left: 50px;
}
.first-child {
width: 210px;
height: 25px;
background-color: green;
}
.second-child {
width: 160px;
height: 25px;
background-color: green;
}
.float-child {
background-color: blue;
width: 50px;
height: 50px;
position: absolute;
left: -50px;
top: 0px;
z-index: -1;
}
</style>
<div class=container>
<div class=first-child style="margin-left: -60px"></div>
</div>
<div class=container>
<div class=first-child style="margin-left: -60px"></div>
<div class=second-child style="margin-left: -10px"></div>
<div class=float-child></div>
</div>
<div class=container style="height: 50px">
<div class=first-child style="width: 150px"></div>
<div class=float-child></div>
</div>
<div class=container style="height: 50px;">
<div class=first-child style="width: 160px"></div>
<div class=float-child></div>
</div>
<div class=container style="height: 50px">
<div class=first-child style="margin-left: 140px; width: 10px"></div>
<div class=second-child style="width: 150px"></div>
<div class=float-child></div>
</div>
<div class=container style="height: 50px">
<div class=first-child style="margin-left: 145px; width: 10px"></div>
<div class=second-child style="width: 150px"></div>
<div class=float-child></div>
</div>