Position options have all what you need to customize element position. In this tutorial we will explore how to use position options.
You can choose from five values static, relative, absolute, fixed, sticky.
The element is positioned according to the normal flow of the document. You can’t use offset values top, right, bottom, left or z-index.
an element’s original position remains in the flow of the document, just like the static value. But now you can use the offset values top, right, bottom, left and z-index.
the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it. It is positioned relative to its closest positioned ancestor
the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
the element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick. check browser support
Now we learn how to centering elements with absolute or fixed position. Position can’t centering elements on his own, we need to mix between position and transform. So we add the preset option to do this mix with one click.
Remember any center presets (top center, left center, middle center, right center, bottom center) are a mix between position and transform so if you use transform options it will break the element position until you add transform manually like next video.