CSS position - partly overlapping div

Question

I have basic CSS layout issue. DIV2 goes up by 150px and overlap partly DIV1. I have a problem with placing DIV3 just under DIV2. I could do it applying the same CSS as in DIV2 to DIV3, but thats not what i'm looking for, as they are many other divs under, and it seem i will have to do the same to all others. There must be something to reset positions. I hope i explain myself clearly. Height of DIV2 has to be flexible too (mobile).

Visual graph:

CSS DIV2:

position: relative;
top: -150px;

HTML:

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

Answer 1

Add this to your div2 , although it's not considered a best practice:

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> 

Answer 2

Use margin-top instead of top property in CSS. And the rest divs below div2 will automatically follow.

And if still it doesn't works, Share the working fiddle of your code.

 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>