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

Question

我需要“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需要有left:-60px;以重叠.child_2

你必须从.child_2添加-30px到child_3，所以 - 30px -30px = -60px

另外：要真正得到child_2覆盖child_3，assing 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>