46

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
(source: cloudfront.net)

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
(source: cloudfront.net)

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

2 Answers 2

68

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.

17

overflow: hidden on the parent would have done it perfectly !

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.