1つのブロックは隣接する2つのCSSと重複する必要があります

Question

2つの隣接するブロックを重ねて/覆うには「div2」が必要です。私は "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は、あなたがそう、.child_2からchild_3に-30pxを追加する必要が.child_2

をオーバーラップさせるためにleft:-60px;を持っている必要があります - 30px -30px = -60px

ADDITION：本当にchild_2にz-index:1をASSING、child_3をカバーするために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 on top

以下のサンプルでは、​​コードを少し簡略化しました。

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