What does “top: 0; left: 0; bottom: 0; right: 0;” mean?

Question

I am reading a guide from this site about a technique on centering elements.

I read the CSS code,

.Absolute-Center {
  margin: auto;
  position: abs         


        

Answer 1

{

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

}

Essentially what these property does is it expands your div or any other element containing above property to one full screen. Although if your web page is larger than one full screen you can scroll downwards to see the remaining of your page i.e the styled element is still dependent on your lower page.

 {

            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;

}

Fixed position on the other hand does the same thing but with one more advantage of non scrolling . It means you can have one entire full screen over your page which can be triggered as and when required and your upper div containing the above property will be independent of lower page.