CSS：位置嵌套元素稍微超出父元素的边界

Question

我有2个div，一个嵌套在另一个里面。根据页面设计，嵌套div需要看起来在父div的“顶部”，如：

我已经为这两个元素编写了CSS编码，使用嵌套div上的负上边距来尝试模拟所需的效果。但是，嵌套div的前10px左右不会出现在父级界限之外，而是会被切断，如：

我不想绝对定位元素，因为此页面的目标是响应。

div的HTML：

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

div的CSS：

.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

您无需将position:absolute应用于嵌套div。

margin可能不是这种情况下的最佳做法。

只需将position:relative添加到嵌套div，然后将top设置为您想要的任何数字。在你的情况下，它可能是负面的。

查看this Fiddle.

Answer 2

父母的

overflow: hidden就完美了！