CSS – Position

positioning

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

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

You May Also Like

About the Author: Pankaj Bisht