“Cascade Style Sheet(CSS) is a stlyesheet language that is used to describe the presentation of a document written in HTML or XML. It describes how the elements will be shown on screen, on paper, in speech or on other media.” — MDN
CSS is like buying furniture for your new house, you just don’t know how it will fit or if it goes with your house that is why we have to try everything. Just like your house is a block, every single element on the web page is also a block. There is a Google Chrome extension called Pesticide that shows the outline of every CSS element on the page.
Now that we spoke about the box elements, we want to know how to position them. The position property comes with static, relative, absolute, fixed, and sticky .
Static
State is a default for every single page element. Static literally means that the element will flow into the page as it would.
Relative
When using the position: relative on an element but no other positioning attributes such as top, left, bottom or right it will show no change rather it would just be the same as position: static. However, if you do give a position attribute of top:10px, it will shift its position 10px down from where it normally would be.
Absolute
With position: absolute, this positioning allows you to place any page element where you want it. You use the positioning attributes top, left, bottom and right to put where you want it.
But do remember that these values will be relative to the next parent element with relative or absolute positioning. If there is no parent, then by default it will render all the way back up to the html element.
Fixed
A Fixed position element is positioned relative to the browser window itself. Meaning that the browser window itself will not change when the window is scrolled. Think of a navigation bar that you want to remain visible at all times regardless of how the page scrolls. However the issue with fixed elements is that it can overlap some content that could be inaccessible.
