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

Question

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:

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:

I don't want to position the element absolutely, because a goal for this page is that it be responsive.

HTML for divs:

<div class="container-div">
  <div class="child-div">
    ...
  </div>
</div>

CSS for the divs:

.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;
}

Answer 1

You don't need to apply position:absolute to the nested div.

And margin probably wouldn't be the best practice in this case.

Just add position:relative to the nested div, and set it's top to any number you want. In your case, it would probably be negative.

Check out this Fiddle.