To understand CSS position we need to understand all HTML element bind with a force due to this reason they follow a pattern. But using CSS we can change that pattern. Elements have a position value of static by default and due to static position HTML element follow the default pattern. So using a value other than static causes an object to become a positioned element. If an element is Positioned then we can use top, left, right, bottom properties for placement.
In css, we have 4 types of positioning
- Static
- Relative
- Absolute
- Fixed
Static
HTML elements are positioned static by default. In static position placement property doesn’t work.
Relative
Renders in the normal flow, and we can shift via positioning properties.
Absolute
Takes an element out of the normal flow for manual positioning
Fixed
Affixes an element to a specific place in the window, where it will stay regardless of scrolling
Manually adjusting overlap:
For overlapping, we use the z-index property. It creates a layer inside the HTML element. No z-index or equal z-index = overlap determined by placement in DOM. Higher values appear above lower values. Elements must be positioned for z-index to take effect. Use relative if you’re not interested in moving the object.
