CSS position property with the absolute value
Setting the element's position
to absolute
takes it out of the flow of the page, and other elements act as if this element doesn't exist. Then we can define this element's position relative to its closest positioned parent using the top
, bottom
, left
, and right
properties. If all parent elements are non-positioned, the browser calculates the offset from the edge of the page. Absolutely positioned elements are placed on top of non-positioned elements and may overlap with other positioned elements.
In the example, the yellow element is 40px below the top edge and 40px to the right from the left edge of the page.