Positioning in CSS

Position is the property of CSS which helps to position our HTML element. With the help of this property we can locate any HTML element at any desired location. Following are the values of position property :-

• Static

• Absolute

• Fixed

• Relative

Let's discuss these values with the following example: HTML

<p id="color1">Red<p>
<p id="color2">Yellow<p>
<p id="color3">Blue<p>

CSS

        #color1{
            background-color: red;
        }
        #color2{
            background-color: yellow;
        }
        #color3{
            background-color: blue;
        }

This will create following effect:

Static :

It is the default position of any HTML element. Static lets the element use it normal behavior. In this positioning, top, bottom, right, left and z-index properties do not apply. Syntax : selector { position : static; }

#color2{
            position: static;
        }

You will not see any change in the output.

Absolute :

It positions the element relative to its first positioned ancestor element. The box of the desired element is taken out of the normal flow and ii does not affect the position of the other elements on the page. In this offset properties are applied (top, bottom, left, right and z-index).

#color3{
            position: absolute;
            top: 50px;
            left: 100px;
            right: 500px;
        }

output:

Fixed :

When we define the value fixed to the positioning, it removes an element from the normal flow and sets its position relative to the browsers window.

#color1{
            position: fixed;
            right: 1000px;
            left: 20px;
        }

output:

Relative :

This positioning moves the element relative to its normal position. Offset properties are used to indicate how far to move the element from its normal position.

#color2{
            position: relative;
            top: 60px;
            left: 200px;
        }

output:

As much as you practice it you will find it more interesting. Keep practicing, keep Coding.