How to make a div overlap other

Question

Well if you see that if there are two divs

<div id="red">
</div>
<div id="blue">
</div>

#red{
    height: 100px;
    width:20px;
    border: 1px;
}
#blue{
    height: 100px;
}

They are rendered as first red will be displayed then blue.

Is it possible that red div actually come at position of blue div but blue div stays on the same position?

Try nesting the `div` if it is okay or you can position them using css. — ashok93, Dec 30 '16 at 09:47
[ http://stackoverflow.com/questions/270493/how-would-you-make-two-divs-overlap](http://stackoverflow.com/questions/270493/how-would-you-make-two-divs-overlap) , [http://stackoverflow.com/questions/15440391/how-to-control-div-overlapping-in-html](http://stackoverflow.com/questions/15440391/how-to-control-div-overlapping-in-html) refer these and there are more other posts on stack itself. — peter pawar, Dec 30 '16 at 09:50

Peter B · Accepted Answer · 2016-12-30T09:56:37.463

Using position: absolute; for the red div will cause it to "float", and then the blue div will start at the same location as the red one.

See code snippet:

#red {
  height: 100px;
  width: 20px;
  border: 1px;
  background: red;
  position: absolute;
}
#blue {
  height: 100px;
  background: blue;
}

<div id="red">
</div>
<div id="blue">
</div>

If your intention was to create a 100px empty space above it all, then you can add margin-top: 100px; to the #blue css rule.

1 Answers1