CSS - 缩小背景div

Question

我需要做以下事情:

第二部分的内容应与第一部分和第三部分重叠.
我设法将content-div移到一边,或者我将第一或第二部分与"position:relative"和一个负的top/bottom值重叠.

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

我简化了图像.这些部分具有成角度的伪元素(之前和之后).不知道,如果重要的话.

使用此代码,我设法将内容部分移至底部或顶部:

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

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

Answer 1

您可以根据第二部分简单地定位两个<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>