html - 一个 block 应该重叠两个相邻的 CSS

Question

我需要“div2”来重叠/覆盖它的两个相邻 block 。我可以用“div1”做到这一点，但我不能用“div3”做到这一点。有人知道怎么做吗？请在下面查看我的代码，了解我遇到的问题。谢谢!

HTML:

<div class="parent">
  <div class="child_1">Some div1</div>
  <div class="child_2">Some div2</div>
  <div class="child_3">Some div3</div>
</div>

CSS:

.parent {
  position: relative;
  font-size: 34px;
  border: 1px solid #000;
  background: #eef;
  height: 110px;
  width: 620px;
  margin: 20px
}

.child_1 {
  position: static;
  text-align:center;
  display: inline-block;
  margin-top:20px;
  margin-left:10px;
  height: 50px;
  width: 200px;
  border: 3px solid yellow;
  background:yellow;
}

.child_2 {
  position: relative;
  text-align:center;
  display: inline-block;
  margin-left:-30px;
  height: 80px;
  width: 200px;
  border: 3px solid blue;
  background:;
  left:-30px;
  top:-10px;
}

.child_3 {
  position: relative;
  display: inline-block;
  text-align:center;
  height: 50px;
  width: 200px;
  border: 3px solid yellow;
  background:yellow;
  left:-30px;
}

Answer 1

.child_3 需要 left:-60px; 才能重叠 .child_2

您必须将 .child_2 中的 -30px 添加到 child_3，所以 -30px -30px = -60px

补充:要真正让 child_2 覆盖 child_3，将 z-index:1 分配给 child_2:

.parent {
  position: relative;
  font-size: 34px;
  border: 1px solid #000;
  background: #eef;
  height: 110px;
  width: 620px;
  margin: 20px;
}

.child_1 {
  position: static;
  text-align:center;
  display: inline-block;
  margin-top:20px;
  margin-left:10px;
  height: 50px;
  width: 200px;
  border: 3px solid yellow;
  background:yellow;
}

.child_2 {
  position: relative;
  text-align:center;
  display: inline-block;
  margin-left:-30px;
  height: 80px;
  width: 200px;
  border: 3px solid blue;
  background:;
  left:-30px;
  top:-10px;
  z-index:1;
}

.child_3 {
  position: relative;
  display: inline-block;
  text-align:center;
  height: 50px;
  width: 200px;
  border: 3px solid yellow;
  background:yellow;
  left:-60px;
}

<div class="parent">
  <div class="child_1">Some div1</div>
  <div class="child_2">Some div2</div>
  <div class="child_3">Some div3</div>
</div>