Один блок должен перекрывать два соседних 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

вы должны добавить -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>