Vova Vova - 22 days ago 6
CSS Question

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 a problem. Thanks!

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

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

Comments