This properties helps us to take element outside the main flow of content and position it on top of other content.

Lets take look of the diagram below:

We have a container div in yellow and three element with content inside that container. Now we want to take the third element content outside of the regular flow of content and position it still inside the container but on top of other content. Like this:

By doing so we:

1. we have to set the third element content to this CSS:

   

   1. When we set the CSS property above the element disappears from flow of content and ends up on top left hand of the window. like the diagram below :

      

      1. So why has this happened above?

         We've taken this element three out of the flow of content but we haven't given it instructions on how it should be contained.

          elementThree{
          position: absolute;
          top: 0;
          left: 0;
          }
         

         At the moment this element assumes that its just needs to be contained somewhere in the window, therefore the top and left property which is set to 0; positions the element on the top left side of the window.

      2. If we want the element to be contained inside our yellow container we have to set the container div to position relative.

         

         1. After setting the container div to position relative the element appears like the image below and as we expected it to be:

            

            1. Finally we can use the top and right property position the element where we want it. check image below the top and left set to 60px and 15px respectively.