title: CSS: position nested element slightly outside of parent element's bounds
body: <p>I have 2 divs, one nested inside of the other.  According to the page design, the nested div needs to appear to be &quot;on top of&quot; the parent div, as in:<br />
  <a href="https://i.stack.imgur.com/QTx5C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QTx5C.png" alt="this image" /></a><br />
  <sub>(source: <a href="https://dzwonsemrish7.cloudfront.net/items/0m1a1Z0Q19212e2y0o1m/Screen%20Shot%202013-01-18%20at%204.54.06%20PM.png?v=cea05db2" rel="nofollow noreferrer">cloudfront.net</a>)</sub></p>
  <p>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:<br />
  <a href="https://i.stack.imgur.com/a9qvR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a9qvR.png" alt="this image" /></a><br />
  <sub>(source: <a href="https://dzwonsemrish7.cloudfront.net/items/0u332c091m2j070g461f/Screen%20Shot%202013-01-18%20at%204.54.18%20PM.png?v=911f961f" rel="nofollow noreferrer">cloudfront.net</a>)</sub></p>
  <p>I don't want to position the element absolutely, because a goal for this page is that it be responsive.</p>
  <p>HTML for divs:</p>
  <pre><code>&lt;div class=&quot;container-div&quot;&gt;
    &lt;div class=&quot;child-div&quot;&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS for the divs:</p>
  <pre><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></pre>