20/06/2023
If the position is set to relative, you should give some more positioning attributes (top, right, bottom, left), otherwise it would have no effect at all!
For example, if the position is set to relative AND we also add a top: 10px, it will shift the position 10px down from where it would normally be. And that is awesome! We can fix positioning between things using this CSS method.
If the position is set to absolute, the element gets out of the flow of the page and can overlap other elements. It is as if it does not have limits. You can add top, right, bottom and left attributes to place this element wherever you want in the page.
An element with position: absolute; is positioned relative to the nearest positioned ancestor. But, if there is no parent/ancestor, it will use the document body, and moves along with the page scrolling. There is a very useful YouTube video here that shows how it works.
If the position is set to fixed, the element is fixed relative to the viewport, or the browser window. When a fixed positioned object is in the page, it will be there even when the screen is scrolled. It can be very useful if you want a menu to be visible at all times.