CSS Introduction | CSS Position Properties | Position

position Property

The position property sets how an HTML element determines its position. In CSS, there are four ways to determine the position of an element.

1. Static positioning
2. Relative positioning
3. Fixed positioning
4. Absolute positioning

Static Positioning

The most basic way to determine the position of an HTML element is static positioning.

An element whose position value is set to static is not affected by the top, right, bottom, or left property values. Static positioning simply places elements in order according to the flow of the web page.

<style>
    div { position: static; }
</style>

The default value of the position property for all HTML elements is static.

Relative Positioning

Relative positioning sets the position based on the default position of the corresponding HTML element.

The default position of an HTML element means the position determined when the element uses static positioning.

<style>
    div.relative { position: relative; left: 30px; }
</style>

Fixed Positioning

Fixed positioning sets the position based on the viewport.

In other words, even when the web page is scrolled, an element set to fixed positioning always remains in the same place.

<style>
    div.fixed { position: fixed; top: 0; right: 0; }
</style>

Absolute Positioning

Absolute positioning works similarly to fixed positioning, which determines position based on the viewport. However, it sets the position based on a positioned ancestor element rather than the viewport.

If there is no positioned ancestor element, the position is set based on the body element of the HTML document.

<style>
    div.absolute { position: absolute; top: 50px; right: 0; }
</style>

A positioned element means an element positioned by a method other than static positioning, such as relative, fixed, or absolute.

Difference Between Static Positioning and Other Methods

Except for static positioning, the other methods(relative, fixed, and absolute) all set the position of the element relative to some reference point.

• Relative positioning: Positioned relative to where the element would be with static positioning.
• Fixed positioning: Positioned relative to the viewport.
• Absolute positioning: Positioned relative to the nearest positioned ancestor element.

<style>
    .static { position: static; }
    .relative { position: relative; }
    .fixed { position: fixed; }
    .absolute { position: absolute; }
</style>

z-index Property

When HTML elements are positioned, some elements may overlap depending on their configured positions and positioning methods. The z-index property sets the stacking order of these overlapping elements. The stacking order can be set with either positive or negative values. Larger values appear in front, while smaller values appear behind.

<style>
    .last {
        position: fixed;
        top: 180px; 
        left: 120px; 
        z-index: -1; 
    }
</style>

CSS position Properties