Positioning and overlapping an element using CSS

The CSS positioning properties allow us to position an element.Elements can be positioned using the top, bottom, left, and right properties.There are more types of positioning they are static,fixed,absolute and relative.

<div id="containers">
  
    <div id="child"></div>
  
</div>

#containers {
  position: relative;
  width: 200px;
  height:200px;
  background:#993300;
  left:100px;
}

On using the above code we have the output as:

When elements are positioned outside the normal flow, they can overlap other elements.The z-index property specifies the stack order of an element which element should be placed in front of, or behind, the others.

#child {
  position: absolute;
  top: 150px;
  right: 100px;
  width: 100%;
  height: 100%;
  background:#063;
}

Finally we have the ouput using z-index,right,left,top and bottom.