Question

当我调整窗口大小时，如何让2个div重叠？

所以基本上只有一个div在前面，另一个在后面，并且只是在我调整窗口大小时保持重叠。

我希望实现类似这样的例子：

＆＃13;

.flex {
  display: flex;
  width: 80%;
  margin: 0 auto;
  height: 100%;
  justify-content: center;
}

.flex1 {
  min-width: 500px;
  height: 538px;
  background: black;
  z-index: 10;
  transform: translateX(40px);
  margin-left: 5%;
}

.flex2 {
  min-width: 500px;
  height: 538px;
  background: grey;
  ;
  z-index: 0;
  transform: translateY(40px) translateX(-50px);
  margin-right: 5%;
}

＆＃13;

<section class="flex">
  <div class="flex1">
  </div>
  <div class="flex2">
  </div>
</section>

＆＃13;

Answer 1

＆＃13;

.flex {
  display: flex;
  position: relative;
}

.flex1 {
  position: absolute;
  left: 10%;
  min-width: 500px;
  height: 538px;
  background: black;
  z-index: 10;
}

.flex2 {
  position: absolute;
  right: 10%;
  transform: translateY(40px);
  min-width: 500px;
  height: 538px;
  background: grey;
  z-index: 0;
}

＆＃13;

<section class="flex">
  <div class="flex1"></div>
  <div class="flex2"></div>
</section>

＆＃13;

revised codepen

调整大小时，Div应该相互重叠

1 个答案: