CSS – Positioning

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

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 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