CSS Positions

In CSS3, the position property is used to specify the type of positioning method used for an element. The different values of the position property determine how an element is positioned within the document, relative to its parent container or to the viewport. Here are some of the most commonly used values for the position property:

 There are four different values for the position property:

1. static: This is the default value and means that the element is positioned according to the normal flow of the document.

2. relative: The element is positioned relative to its normal position in the flow of the document. You can use top, bottom, left, and right properties to specify how far the element should be moved from its normal position.

3. absolute: The element is positioned relative to its nearest positioned ancestor, if any; otherwise, it is positioned relative to the initial containing block. The top, bottom, left, and right properties can be used to specify the exact position of the element.

4. fixed: The element is positioned relative to the window, and it will not move when the window is scrolled. The top, bottom, left, and right properties can be used to specify the exact position of the element.

Each of these values provides different options for controlling the positioning of elements on a web page, and they can be used in combination with other CSS properties to create sophisticated layouts and designs.

Position Absolute

position absolute is used to change the position with respect to html document.

div{
    position: absolute;
    top: 100px;
    right: 200px;
}

Position Relative

This property is used to set the position with respect to parent element.

p{
    position: relative;
    top: 100px;
    right: 200px;
}

Position Sticky

This property is used to fixed the position of an element at point. If webpage will be scrolled but position do not change.

p{
    position: sticky;
    top: 100px;
    right: 200px;
}

Position Fixed

To fixed the position of an element on webpage.

p{
    position: fixed;
    top: 100px;
    right: 200px;
}

---