How To Overlay One Div Over Another Div




Here we consider how to Overlay One Div Over Another Div. You can overlay a Div on any other Div by using z-index and position Style. Suppose we have two Div with ID FirstDiv and SecondDiv.

Overlay One Div Over Another Div Using CSS, How To Overlay One Div Over Another Div Using CSS, Overlay One Div Over Another Div, Overlay Div Using CSS, Place One Div Over Another Div, Hold One Div Over Another Div, Move One Div Over Another Div, HTML, CSS

Following are the style applied for these Div.

#FirstDiv
{
         width: 200px;
         height: 200px;
         background: red;
         margin: 4px;
         position: absolute;
}
#SecondDiv
{
         width: 150px;
         height: 150px;
         background: blue;
         position: absolute;
}



For making the Second Div Overlay on the FirstDiv, apply z-index : 1 for SecondDiv.

#SecondDiv
{
         width: 150px;
         height: 150px;
         background: blue;
         position: absolute;
          z-index: 1;
}



By using z-index : 1 and position: absolute, we can overlay one Div over another. In other words, the top Div should have greater z-index than the below Div.