CSS-Positions

In this article we will discuss about the CSS Positions. The CSS property Position is used to set the element at required position in HTML document. It will use top, bottom ,left, right properties to finalize the position of element in document. There are five positions as follows

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

The syntax of the positions is as follows

.container{
    position: relative;   
    position: absolute; 
    position: fixed;
    position: sticky; 
}

To understand positions we need to understand following two things

• With respect to what position applied

• Scrolling effect on element

1.Static Position:- It is default position for every element. The element will take pace according to its HTML document. The left, right, top, bottom properties will not take effect if position is static. The scrolling of element will happen according to flow of document.

.box-3{
    left: 50px;
    right: 50px;
}

2.Relative Position:- The element is created as per document flow. But the element will take position with respect to its original position. It can overlap another element also, but its original position will remain their. The element will scroll as per normal flow. In the following example box-3 has applied following style

.box-3{
    position: relative;
    left: 100px;
    top:20px;
}

Here you can see red square which is original position of box, after applying left and top property it moved to final position with respect to red dotted box.

3.Absolute Position:- When any element get Absolute position it is taken out of normal document . There is no space reserved for that element in the document. The element and document become totally independent. Now that element will take its final position with respect to document body(viewport) which is default or its containing element if its has position relative. In following example the box 3 has applied absolute position so it will take its final position with respect to viewport and you can notice there is no space for box-3 in document. This element is superimposed of main document.

.box-3{
    position: absolute;
    left: 100px;
    top:20px;
}

If the containing element has position as relative then the element will take its final position with respect to that element. It is need not be immediate parent element. The box-3 has applied absolute position with respect to its immediate parent. It can be main parent container which has double border.

.parent-div{
    position: relative;

}
.box-3{
    position: absolute;
    left: 10px;
    top:20px;
}

As parent element(dotted border) has relative position the box will take its final position from that parent element. By default the element will take the final position from main body(viewport) or if any parent element has position as relative.

One thing to notice here if the element has not given any left, write, top, bottom properties. It will be created according to its html flow but it will not take any space in document it will be superimposed on other element. In below image you can see box-3(givem small margin for explanation purpose) is on box-4.

4.Fixed Position:-The element with position fixed will take it final position from viewport and will remain their. scrolling will not affect this element. when you scroll the document everting scroll as per normal flow but the element will remain on top layer of page. In following example box-2 and box-3 has given fixed position.

.box-3{
    position: fixed;
    right:10px;
    bottom:10px;
    border: 2px dashed royalblue;
}
.box-2{
    position: fixed;
    left:10px;
    top:20px;
    border: 2px dashed royalblue;
}

When you scroll the document the element will remain their position only and whole document will scroll behind the element

5.Sticky Position:- The element with sticky position will be created as per HTML. For sticky top and bottom will work. let say top:10px; is given. the element will scroll as per document till it reaches the top 10px from viewport it will act as fixed will remain their till its parent container scrolling. The sticky position is explained in below. Box-2 has given sticky position.

.box-2{
    position: sticky;
    top:10px;  
}

This element has parent container which has double border. when you start scrolling it will scroll normally till it reaches to 10px from viewport. it will remain their as fixed till its parent container is scrolling, When parent container disappear from viewport the element also disappear from viewport.

The blue box has parent container with white double border, when blue box reaches 10px from viewport it will remain their only till its parent container is scrolling. when the another container which has blue border came to viewport the blue box disappear.

The summery for all position

• static :- by default for all element and scrolling as per flow
• relative :- with respect to its original position , the space is created in document, scrolling as per flow
• absolute : by default with respect to viewport or any parent who has position relative ,no space is created in document, scrolling as per flow
• fixed :- With respect to viewport only, no space created in document, element will not scroll
• sticky :- with respect to viewport, space is created in document, scroll till position reached then become fixed and when parent disappear from document element also disappear

The code file in following GitHub repository