Question

我有一个父div ，基本上是一个非常长的博客，其中包含文字和图片。我希望其中的 div 作为父级的更宽，但是我不希望它覆盖周围的元素。目前，如果我执行以下操作，它将覆盖其下面的h3元素：

.parent{
position: relative;
max-width: 800px;

}

.child{
position: absolute;
left:-17rem
}

Answer 1

一旦添加position: absolute，就将其从文档流中删除，并且其余文档呈现为，好像它不存在一样-表示如果其高度为20px，下方的内容将向上移动20像素以填充该空间，因为他们将其视为根本不存在。

Box，Grid和Flex容器的初始overflow值设置为visible-这样您就可以轻松地将子元素放置在父元素之外。

考虑使用transform和translateX()：

.parent {
  width: 50%;
  max-width: 400px;
}

.child {
  width: calc( 100% + 40px ); /* If you want div 40px larger */
  transform: translateX(-20px); /* Offset by half of that value (20px) */
}

/* Just Here for Styling Purposes */
.parent{padding:20px 0;margin:0 auto;background:#09e;}.child{background:rgba(0,0,0,.5);color:#fff;padding:10px 0;text-align:center;}.next {background:#eee;padding:20px;text-align:center;}

<div class="parent">
  <div class="child">TEXT IN HERE</div>
</div>
<div class="next">This should remain where it was originally</div>

如何在不覆盖周围元素的情况下使子div比其父div更宽

1 个答案: