一个块应该重叠两个相邻的 CSS

Question

我需要 "div2" 到 overlap/cover 它的两个相邻块。我可以用 "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

你必须将 -30px 从 .child_2 添加到 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>

Answer 2

您需要增加 child3 上的负左值，并且您需要使用 z-index 将 child2 置于顶部

在下面的示例中，我稍微简化了您的代码。

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

.child {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 200px;
  margin: 20px;
  text-align:center;
  vertical-align: middle;
  z-index: 1;
  border: 3px solid yellow;
}

.child.nr1 {
  background:yellow;
  margin-right: -60px;
}
.child.nr3 {
  background:yellow;
  margin-left: -60px;
}
.child.nr2 {
  height: 60px;
  border: 3px solid blue;
  z-index: 2;
}

<div class="parent">
  <div class="child nr1">Some div1</div>
  <div class="child nr2">Some div2</div>
  <div class="child nr3">Some div3</div>
</div>

一个块应该重叠两个相邻的 CSS

One block should overlap the two adjacent CSS

html

css

position