Nita Nita - 2 months ago 8
HTML Question

CSS position - partly overlaping div

I have basic CSS layout isssue. 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>

Answer

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>

Comments