CSS - 缩小背景div

Question

我需要做以下事项：

第二部分的内容应与第一部分和第三部分重叠 我设法将内容div移到一边，或者我将第一或第二部分与＆＃34; position：relative＆＃34;和一个负的上/下值。

是否有可能缩小背景包装div但是顺便说一下，它不会影响内包装内容div？

我简化了图像。这些部分具有成角度的伪元素（之前和之后）。如果重要的话，不要知道。

使用此代码，我设法将内容部分移到底部或顶部：

.site-container {
    position: relative;
    bottom: -100px;
} 

但主要部分仍然与内在内容一样高。

Answer 1

您可以简单地position两个<div>元素，具体取决于第二部分不受容器大小影响：

section {
  display: block;
  width: 50vw;
  height: 30vh;
  border: 2px solid;
  position: relative;
}

div {
  position: absolute;
  left: 15vw;
  width: 20vw;
  height: 10vh;
  border: 1px solid;
  background: white;
  z-index: 2;
}

div:first-child {
  top: -5vh;
}

div:nth-child(2) {
  bottom: -5vh;
}

<section>1</section>
<section>2
  <div>2.1</div>
  <div>2.2</div>
</section>
<section>3</section>