Positioning Elements in CSS

What is position property?

Position CSS property is used to set the position of the element as per the DOM flow and how it will rendered on user's browser page.

The position of the element is an important criteria for responsive designs.That is,position property decides how the element should orient itself with respect to different display resolution devices.

Different positioning types

The position of elements can be done in the following ways.

1. static
2. relative
3. absolute
4. fixed
5. sticky

Let's look at one by one,

1.static

Here the element is positioned with respect to normal flow of DOM.

This is the default position of the element in the DOM. Top,left,bottom,right and z-index won't work here.

The static element is positioned just next or after its parent element.

2.relative

Here the element is positioned based on its static position where it was supposed to be.Thus, the origin point here is its static position.

Top,left,bottom,right and z-index works here which helps to position the element actually in the DOM based on its normal static position.

The positioning of relative elements won't affect other elements in the flow,with there static positions.

Let's see below example,

.box {
   width:200px;
   height:200px;
   background-color:blue;
}

#two{
    position:relative;
    width:200px;
    height:200px;
    background-color:red;
    top:50px;
    left:50px;
    Color:red;
}

<div class="box" id="One">This is Box1</div>
<div class="box" id="Two">This is Box2</div>

3.Absolute

Here the element is positioned based on its first non static ancestor in DOM flow.

It follows its ancestors till it gets a non-static parent,ultimately if it won't get any it will follow the 'html' tag by default,though it is non-static.

Hence,comes just next to non-static or else html tag. The space for absolute element is not created and positioning decides its space.

Also,its margin won't collapse with other elements in the flow.

lets look at an example,

.box1{
            background-color: blueviolet;
            height: 100px;
            width: 100px;
        }
        .box2{
            background-color: blue;
            height: 200px;
            width: 200px;
        }
        .box3{
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: chocolate
        }

<div class="box1">
        This is Box1
    </div>
    <div class="box2">
        This is Box2
    </div>
    <div class="box3">
        This is Box3
    </div>

4.Fixed

Here the element is positioned based on the viewport or display of the device. Here also the element space is not reserved and decided upon positioning.

The positioning is with respect to viewport and provides more control over the elements in the flow.

.box1{
            background-color: blueviolet;
            height: 100px;
            width: 100px;
        }
        .box2{
            background-color: blue;
            height: 200px;
            width: 200px;
        }
        .box3{
            position: fixed;
            height: 100px;
            width: 100px;
            background-color: chocolate;

        }

<div class="box1">
        This is Box1
    </div>
    <div class="box2">
        This is Box2
    </div>
    <div class="box3">
        This is Box3
    </div>

5.Sticky

The element is positioned here with respect to normal flow of DOM and positioned with respect to its first scrolling ancestor or block element.

It also won't affect the position of other elements in DOM flow.

Say if we have a chat icon position stick at the bottom-left corner,it sticks to it when the page is scrolled.

This feature is useful for creating chat icons,query forms and sticky navbar.

.box1{
            background-color: blueviolet;
            height: 100px;
            width: 100px;
        }
        .box2{
            background-color: blue;
            height: 200px;
            width: 200px;
        }
        .box3{
            position: fixed;
            height: 100px;
            width: 100px;
            background-color: chocolate;

        }
        .sbar{
            position: sticky;
            height: 80px;
            width: 80px;
            left: 80vw;
            top: 80vh;
            background-color: crimson;
            border-radius: 8px;
            cursor: pointer;
        }

<div class="box1">
        This is Box1    
    </div>
    <div class="box2">
        This is Box2
    </div>
    <div class="box3">
        This is Box3
    </div>
    <div class="sbar">
        stickybar
    </div>