html - CSS - 缩小背景 div

Question

我需要做以下事情:

第二部分的内容应与第一部分和第三部分重叠。
我设法将 content-div 移到一侧，或者我将第一部分或第二部分与“position:relative”和负的顶部/底部值重叠。

是否有可能以某种方式缩小背景包装器 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>