Understanding Position Property in CSS

Reading time: 20 minutes | Coding time: 2 minutes

The CSS position property is used to specify the position of HTML element in the webpage. Some of the sub-topics we have covered are:

1. Position: Static
2. Position: Relative
3. Position: Fixed
4. Position: Absolute
5. Position: Sticky

Once the position property is set to a given value/keyword. The HTML element has a defined location from which it can be shift relatively using the following keywords:

• top
• bottom
• left
• right

The CSS position property can take following values:

1. Static
2. Fixed
3. Relative
4. Absolute
5. Sticky

Syntax: CSS Position

<style>
    HTML_element
    {
    position: {keyword};
    top: {value};
    bottom: {value};
    right: {value};
    left: {value};
    }
</style>

Example:

<style>
    h1
    {
    position: absolute;
    top: 40px;
    left: 100px;
    }
</style>
<h1> Generic Heading </h1>

Output:

Here,

• The heading has absolute placement with respect to the boundaries of web page.
• The heading has 40px distance from top of webpage
• The heading has 100px distance from left of the webpage.

1. Position : Static

This is the default value for CSS position.
When value of CSS position is set to static, the HTML element just gets placed in the normal flow of the webpage.
It does not have any special positioning property.
The property values for top, left, right and bottom do not work when CSS position is set to static.

Syntax

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

Example:

<style>
    h1
    {
    position: static;
    top: 100px;
    left: 200px;
    }
</style>
<h1> Generic Heading </h1>

Output:

Here,

• Position property is set to static
• Despite the fact that left and top margins are set, there is no gap between webpage boundary and HTML <h1> element because of static keyword.

2. Position : Relative

CSS Position can be set as relative. It sets the position of the HTML element on its default location (as specified by static). If the boundary distance is specified by top, left, right and bottom CSS properties, then the HTML element will shift by that value with respect to its default location.

Note: The CSS relative position only causes the element it works upon to move from its location. It does not affect the other elements. This may cause overlapping between elements.

Syntax:

<style>
    HTML_element
    {
    position: relative;
    top: {value};
    bottom: {value};
    right: {value};
    left: {value};
    }
</style>

Example:

<style>
    #head1
    {
    position: relative;
    top: 40px;
    bottom: 100px;
    right: 30px;
    left: 100px;
    }
</style>
<h1> Generic Heading </h1>
<h1 id="head1"> Heading with relative positioning </h1>

Output:

Here,

• First heading has static (default) positioning.
• Second heading has a relative position with respect to webpage boundaries with top margin of 40px, left margin of 100px, right margin of 30px and bottom margin of 100px.

3. Position : Fixed

CSS Position property, when set to value fixed, fixes the position of HTML element at specified location of the webpage along with the viewport. It means that even though the webpage is scrolled up/down, the HTML element will always remain fixed on its specified co-ordinates on the webpage.

Syntax:

<style>
    HTML_element
    {
    position: fixed;
    top: {value};
    bottom: {value};
    left: {value};
    right: {value};
    }
</style>

Example

<style>
    img
    {
    position: fixed;
    top: 100px;
    left: 100px;
    }
</style>
<h1> Generic Heading </h1>
<img src="OpenGenus.jpg" alt="OpenGenus Foundation Logo">
<pre>
...
... 
...
</pre>

Output: On opening the webpage

Output: After scrolling down the webpage

Here, the viewport location of <img> HTML element is fixed.

• The first output shows the image when the webpage is opened.
• The second output shows the image on the same position on webpage even though the webpage has been scrolled down.

4. Position : Absolute

CSS Position: absolute positions the HTML element according to following rule:

• If HTML element in contained in another HTML element that has a position specifed with any keyword other than static, the HTML element positions itself with respect to the parent element.
• Else, HTML element position itself with respect to the document body.

Syntax:

<style>
    HTML_element
    {
    position: absolute;
    top: {value};
    bottom: {value};
    left: {value};
    right: {value};
    }
</style>

Case 1: HTML element has a positioned ancestor ,i.e., HTML element is contained in another HTML element that is positioned using keyword other than static

<style>
    div
    {
    position: relative;
    top: 40px;
    left: 100px;
    }
    h1
    {
    position: absolute;
    top: 40px;
    left: 50px;
    }
</style>
<div>
    <h2> Div Generic Element </h2>
    <h1> Generic Heading </h1>
</div>

Output:

Case 2: HTML element has no positioned ancestor

<style>
    h1
    {
    position: absolute;
    top: 100px;
    left: 100px;
    }
</style>
<h2> Generic Heading </h2>
<h1> Heading with Absolute positioning </h1>

Output: