in

CSS Positioning – DEV Community


In CSS Positioning of elements is very important topic. CSS having five type of Positioning method

1. static
2. relative
3. fixid
4. absolute
5. sticky

Static

  1. default form of HTML
  2. Do not have any specific styling
  3. We can not use top, bottom, left, right with static positioning

relative

  1. Give affect relative to its normal position.
  2. Normally No element can occupy its position.
    CSS relative property Demonstration

Fixed

  1. give affect relative to view port.
  2. It always occupy the same place unless page is scroll.
  3. top, bottom, left, right can be used with it
  4. Normally other element occupy blank space which it left

CSS Fixed property Demonstration

Absolute

  1. relative to the nearest positioned ancestor(instead of positioned relative to the viewport, like fixed).
  2. It move along the scroll
  3. if there are no ancestor exits it used document body
  4. space left by element is fulfilled by another element.

CSS Absolute Property Demonstration

Sticky

  1. position based on the scroll
  2. element toggle between relative and fixed
  3. Element perform like relative property until viewport does not match then perform as fixed

CSS Absolute Property Demonstration

All the positioning property is applied as:

.className or #Id or tag {
positon: ProperyName; fixed);
}
PropertyName: static OR relative OR absolute OR sticky

Thanks for Reading…

By Tech 9-on



Source: https://dev.to/kukdoku/css-positioning-2og9

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

OKRs for Startups — A practical guide on OKRs including templates and tutorials

Ionic Portals Aims to Simplify the Integration of Web Apps into iOS and Android Native Code