CSS: position nested element slightly outside of parent element's bounds

[el_magic]

I have 2 divs, one nested inside of the other. According to the page design, the nested div needs to appear to be "on top of" the parent div, as in this image.I've got the CSS coded for both elements, using a negative top margin on the nested div to attempt to simulate the desired effect. However, instead of appearing outside of the parent's bounds, the nested div's top 10px or so are getting cut off, as in this image.I don't want to position the element absolutely, because a goal for this page is that it be responsive.HTML for divs:\[code\]<div class="container-div"> <div class="child-div"> ... </div></div>\[/code\]CSS for the divs:\[code\].container-div { padding: 10px 10px 0;}.child-div { display: inline-block; width: 100px; height: 60px; margin: -15px 10px 0; border: 1px solid #efefef; background-color: #fff;}\[/code\]