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

Posted 2023-02-18

【中文标题】CSS：将嵌套元素定位在父元素边界之外

【英文标题】：CSS: position nested element slightly outside of parent element's bounds

【发布时间】：2013-01-02 18:17:30

【问题描述】：

我有 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;

【参考方案1】：

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

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

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

查看this Fiddle.

【参考方案2】：

overflow: hidden 在父级上会做得很好！