html - CSS：将嵌套元素定位在父元素边界之外

Question

我有 2 个 div，一个嵌套在另一个内部。根据页面设计，嵌套 div 需要出现在父 div 的“顶部”，如：（_{来源：cloudfront.net）}

我已经为这两个元素编码了 CSS，在嵌套 div 上使用负上边距来尝试模拟所需的效果。但是，嵌套 div 的顶部 10px 左右并没有出现在父级边界之外，而是被截断，如下所示：（_{来源：cloudfront.net）}

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

用于 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在父母身上会做得很完美！