One Block Should Overlap The Two Adjacent Css

I need 'div2' to overlap/cover its two adjacent block. I can do it with 'div1', but I cannot do it with 'div3'. Someone know how to do it? Please see my code below with what I have

Solution 1:

.child_3 needs to have left:-60px; in order to overlap .child_2

you have to add the -30px from .child_2to child_3, so -30px -30px = -60px

ADDITION: To really get child_2 to COVER child_3, assing z-index:1 to 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;
}

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

Solution 2:

You need to increase the negative left value on child3, and you need you use z-index to position child2 on top

In below sample I simplified your code a little.

.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;
}

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