CSS- Position

The position property specifies the type of positioning method used for an element. This property is also used to place an element behind another and also useful for scripted animation effect.

We use the following CSS positioning

  • CSS Static Positioning
  • CSS Fixed Positioning
  • CSS Relative Positioning
  • CSS Absolute Positioning
  • CSS Static Positioning

    CSS Static Positioning is a by default position for HTML elements. It always positions an element according to the normal flow of the page. It is not affected by the top, bottom, left and right properties.

    Example :-

    Result

    An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

    This div element has position: static;

    CSS Fixed Positioning

    To put the text fixed on the browser, we use the fixed positioning property. This fixed test is positioned relative to the browser window, and doesn't move even you scroll the window.

    Example :-

    Result

    CSS Relative Positioning

    to set the element relative to its normal position, we use the relative positioning property .

    Example :-

    Result

    An element with position: relative; is positioned relative to its normal position:

    This div element has position: relative;

    CSS Absolute Positioning

    To position an element relative to the first parent element that has a position other than static, we use the absolute positioning . If no such element is found, the containing block is HTML.

    We can place an element anywhere on a page with the absolute positioning.

    Example

    Result

    An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):

    This div element has position: relative;
    This div element has position: absolute;

    CSS Sticky Positioning

    A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed)

    Example

    Result

    Try to scroll inside this frame to understand how sticky positioning works.

    I am sticky!

    In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

    Scroll back up to remove the stickyness.