Позиция CSS - частично перекрытие div

Question

У меня есть базовый CSS-макет isssue. DIV2 поднимается на 150 пикселей и частично перекрывается DIV1. У меня проблема с размещением DIV3 только под DIV2. Я мог бы сделать это, применяя тот же CSS, что и в DIV2 до DIV3, но это не то, что я ищу, так как у них много других div, и кажется, что мне придется делать то же самое со всеми остальными. Должно быть что-то для сброса позиций. Надеюсь, я ясно объясню. Высота DIV2 также должна быть гибкой (мобильной).

Визуальный график:

CSS div2:

position: relative; 
top: -150px; 

HTML:

<div class="div1"></div> 
<div class="div2"></div> 
<div class="div3"></div> 

Answer 1

margin-top Использование вместо top собственности в CSS. И остальные divs ниже div2 будут автоматически следовать.

И если все еще это не работает, поделитесь рабочей скриптой своего кода.

div { 
 
    width: 300px; 
 
    height: 150px; 
 
} 
 
.div1 { 
 
    background: red; 
 
} 
 
.div3 { 
 
    background: green; 
 
} 
 
.div2 { 
 
    margin: 0 auto; 
 
    margin-top: -50px; 
 
    background: yellow; 
 
    width: 150px; 
 
} 
 
.parent { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
}

<div class="parent"> 
 
    <div class="div1"></div> 
 
    <div class="div2"></div> 
 
    <div class="div3"></div> 
 
    <div class="div1"></div> 
 
    <div class="div3"></div> 
 
</div>

Answer 2

Добавьте это в div2, хотя это не считается лучшей практики:

margin-bottom: -150px

.div1, 
 
.div2, 
 
.div3 { 
 
    height: 150px; 
 
} 
 

 
.div1 { 
 
    background: red; 
 
} 
 

 
.div2 { 
 
    background: blue; 
 
    position: relative; 
 
    top: -75px; 
 
    margin-bottom: -75px; 
 
} 
 

 
.div3 { 
 
    background: green; 
 
}

<div class="div1"></div> 
 
<div class="div2"></div> 
 
<div class="div3"></div>