CODEWITHSUNDEEP
htmlcss
Nita
Nita

Reputation: 561

CSS position - partly overlapping div

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:

enter image description here

CSS DIV2:

position: relative;
top: -150px;

HTML:

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

Upvotes: 0

Views: 493

Answers (2)

Deepak Yadav
Deepak Yadav

Reputation: 7109

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>

Upvotes: 1

Christoph
Christoph

Reputation: 1630

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>

Upvotes: 1

Related Questions