If you want to fix elements to the page, or position a design element precisely, we're going to need more than just margins.
Top, right, bottom, left
Elements have top, right, bottom and left (TRBL) properties that can be used to position them precisely on the page.
Elements are, by default, positioned statically on the page. This means they follow one after the other. Static elements will ignore TRBL properties.
Position: absolute / relative;
To take advantage of these properties, we have to set an element's position property. Setting it to absolute allows other elements to flow through it, essentially removing it from the page structure. It will also sit in the top-left of the browser window. We can then position it using the TRBL properties.
This is where position: relative; comes in – if you set the element's parent position property to relative, our absolute element will sit relative to it, rather than the browser window. You're saying, elements inside me should sit relative to me, rather than the document.
If we set an element to position: fixed; it behaves exactly like an absolutely positioned element, it just doesn't move on scroll. This is very handy.
Absolute and fixed position elements can overlap each other. To determine the order of the stack of elements, we use "z-index". Elements with high z-index values sit on top of other elements.Play