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为您想要的任何数字.在你的情况下,它可能是负面的.

看看这个小提琴.

Answer 2

overflow: hidden 在父母身上会做得很完美!