CSS Positions: Static, Relative, Absolute, Fixed, and Sticky

The position is basically a property in CSS which allows us to place the element anywhere within the HTML page. It also allows us to place the element within the parent element such that it can be moved freely within its parent. Some of the applications of Positions is Dropdown, Free-floating chatbox like we see in Facebook on Desktop, etc.

Types of Positions

In total there are 5 types of positions. Each position performs a specific task. so let’s discuss them one by one:

  1. Static Position

    The static position is the default position in CSS. It makes the element render in a normal HTML flow.
  2. Relative Position

    The relative position makes the element move from its static origin. To move the element with a relative position set, we need to use offset values: top, bottom, left, and right.
  3. Absolute Position

    Absolute position is used to move the element within its parent element. Again, Offset values are used to move the element but constrained within its parent. Also, an element set to the absolute position makes the element appear inline by setting the with of the element same to content/text it holds.
  4. Fixed Position

    The Fixed Position makes the element stick to the position where it is placed. Both fixed and absolute positioning are the same in a way that they both can be moved within their parent element. One major difference between the two is that even scrolling of the page doesn’t move the element that’s why the name is FIXED!
  5. Sticky Position

    The element set to sticky position works on the basis of the user’s scroll position. The element toggles between relative and fixed positions based on the user scroll position. By default, the element is placed as “relative”, but as the user scrolls and a given offset position is met in the viewport – then it “sticks” in place same as position: fixed.

Refer the video for complete tutorial on CSS Positioning in HINDI

CSS Positions: Static, Relative, Absolute, Fixed, Sticky with examples in Hindi

Leave a Reply

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