CSS positioning properties

Fixed Positioning : The element's position is fixed relative to the browser window. (out of standard document flow)

Note: The fixed positioning of the element does not mean that a certain point of the element is positioned relative to the element of the reference element, but the positioning of the four sides of the positioned element relative to the reference element.

For example, in the following example, the values of the four properties of left, right, top, and bottom are all valid.

    h2
        {
            position:fixed;
            background-color: red;
            left:100px;
            right: 10px;
            top:150px;
            bottom: 10px;
        }

Relative Positioning : Relatively positioned elements are positioned relative to their normal position. (standard document flow)

Relatively positioned elements only change their position, not their size.

As in the example below, bottom has no effect.

 h2
        {
            position:relative;
            background-color: red;
            top:150px;
            bottom: 10px;
        }

Absolute positioning : The position of an absolutely positioned element is relative to the nearest positioned parent, or relative to the <html> if the element has no positioned parent. (out of standard document flow)

Note: Absolutely positioned elements do not mean that a certain point of the element is positioned relative to the reference element, but the four sides of the positioned element are positioned relative to the reference element. (relative positioning, position changes will not affect element size changes)

For example, in the following example, the values of the four properties of left, right, top, and bottom are all valid.

 h2
        {
            position:absolute;
            background-color: red;
            left:100px;
            right: 10px;
            top:150px;
            bottom: 10px;
        }

CSS positioning properties

Guess you like