CSS – Positioning


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 default pattern. So using a value other than static causes an object to become a positioned element. If element is Positioned then we can use top, left, right, bottom properties for placement.

In css we have 4 types of positioning

1. static
2. relative
3. absolute
4. fixed

HTML elements are positioned static by default. In static position placement property doesn’t work.


Renders in the normal flow, and we can shift via positioning properties.


Takes an element out of the normal flow for manual positioning


Affixes an element to a specific place in the window, where it will stay regardless of scrolling

Manually adjusting overlap:

For overlapping we use z-index property. It’s create layer inside 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.

You May Also Like

About the Author: admin