Absolute positioning removes an element from the normal flow of elements without leaving behind the space it had occupied, so that it no longer influences the positions of other elements. The other elements simply flow normally underneath as if it is not there. To specify that an element should be absolutely positioned, the value of absolute is used with the position property and the top or bottom and the left or right properties are then used to specify where to place the element relative to the border of the containing element’s box (i.e., the next parent element’s box). In the absence of a containing element, the element is placed relative to the <html> element. Figures 12.6 and 12.7 show how the properties are used and the effect.
In the example, the h{} rule absolutely positions the <h2> element lOpx from the top and 50px from the left edges of the <html> element, since there is no next parent element. The background color has been added to make it easier to see the layering of the elements. Note that the reason the absolutely positioned element is so far from the top, even though only a value of 10px is specified, is because browsers usually add margin to the top of the heading element. To remove the margin for the <h2> element in the example, zero-margin declaration can be added to its rule.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.