<?xml version="1.0" encoding="utf-8"?>

CSS position property with the absolute value

CSS position property with the absolute value  Bad Practice
CSS position property with the absolute value  Best Practice

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.

Improve your UX & Product skills with interactive courses that actually work