Css:将嵌套元素定位在父元素边界之外一点

2022-08-19 00:00:00 html css positioning

我有两个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;
}

解决方案

您不需要将position:absolute应用于嵌套的div

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

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

签出this Fiddle.

相关文章