CSS：将嵌套元素的位置略微移出父元素的边界

Question

我有两个div，其中一个嵌套在另一个中。根据页面设计，嵌套的div需要显示为“在顶部”，如下所示：

_{(来源: cloudfront.net)}

我已经为两个元素编写了CSS代码，对嵌套的div使用负的上边距来尝试模拟所需的效果。但是，嵌套的div的顶部大约10像素被剪切掉了，如下所示：

_{(来源: cloudfront.net)}

我不想将元素的位置绝对定位，因为该页面的目标是响应式设计。

div的HTML代码：

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

CSS用于div：

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

- Kevin Whitaker

Answer 1

你不需要对嵌套的 div 应用 position:absolute。

在这种情况下，margin 可能不是最佳实践。

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

查看 this Fiddle.

- user1991651

Answer 2

overflow: hidden在父元素上的使用就可以完美解决这个问题！

- Play Mobil