Why are positioned divs overlapping?

MarksCode Published at Dev

MarksCode

I have a main wrapper div with 2 content divs inside. The position attribute of both content divs is set to relative, but for some reason they're overlapping as shown here:

I want the div outlined in red to be underneath the blue one and am having trouble figuring out how to do so.

#wrap {
  height: 500px;
  width: 350px;
  border: 3px solid black;
}
#upper {
  position: relative;
  width: 40%;
  height: 70%;
  top: 5%;
  left: 2%;
  border: 1px solid blue;
  text-align: center;
}
#lower {
  position: relative;
  width: 40%;
  height: 20%;
  left: 2%;
  border: 1px solid red;
}

<div id="wrap">
  <div id="upper"></div>
  <div id="lower"></div>
</div>

Can someone please help me figure out how to align them correctly?

shantanu kaushik

The styling of the div#upperDiv has top:5% which causing this to happen. Although relative but div#upperDiv is taking the 5% top to overlap on div#lowerDiv. Solution: EITHER take that top:5% styling off from upperDiv OR add the same top style to lowerDiv.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-03-3

Comments

0 comments

From Dev

Related Related

Article