Developing an understanding of the position property in CSS can be one of the most frustrating experiences for a beginner. In this article we will learn about css positioning in an easy way that you can understand and never get confused.

What is CSS position property?

CSS position property defines the location of element on web page . To control just how an element will appear in the layout, you need to use the CSS position property. In addition, you can utilize some other position-related properties: top, right, bottom, left, and z-index. (We’ll get more into those later on.)

Five values of position property

• Static
• Relative
• Absolute
• Fixed
• Sticky

Static

Let's learn about static positioning. Static positioning is the default positioning of every element. Adding top, bottom, left, or right properties won't affect this element.

Syntax:

selector{
position:static;

Did you notice that there is no change even if i have given right:500px; Elements that are statically positioned will appear on the page in what we call the normal flow.

Relative

Position: relative also remains in the normal flow of Html documents but unlike static, it unlocks other position-related properties like top, bottom, right, left, and z-index. Syntax:

selector{
position:relative;

Let's take an example: I have replaced the position of div to relative and now I can set properties to it to move the element. I have used top:50px; using this property it is moved 50px from its original position. In the given example of codepen comment or uncomment top property in relative positive to see the changes.

Relatively positioned parent and child elements

Let’s try another example, using a parent element with a child element nested inside it. Both have position: relative set.

Syntax:-

.parent-element{
   position:relative;
}
.child-element{
   position:relative;
   top:0px;
   left:0px;
}

Absolute

An absolutely positioned element needs to position itself in relation to a positioned ancestor.

position: absolute essentially does the same thing as position: relative, with two key differences:

• The element is taken out of normal flow and leaves no space behind.
• The element is positioned relative to its nearest parent with a relative-type positioning.

Syntax:-

.parent-element{
   position:relative;
}
.child-element{
   position:absolute;
   top:0px;
   left:0px;
}

Fixed

Position: fixed will take the element out of the normal flow as same as position: absolute but they are position it in the same place in the viewport (what’s visible on screen). This means that scrolling will not affect its position at all. Position: fixed is commonly used to make navigation bars that are always fixed to the top. It’s a super helpful property!

Syntax:-

selector{
position:fixed;
}

The blue fixed element will stay positioned to the bottom and left corner of the viewport. And if you scroll, the purple element will scroll up normally, but the blue element will remain stuck to where we positioned it.

Sticky

position: sticky is combination of relative and fixed property. This can be really useful if you want to stick an element that’s initially farther down the page to the top of the screen. Elements behave like in relative position but when we scroll down they will get out of normal flow and act like fixed positioning. you can better understand with an example.

Syntax:-

selector{
position:sticky;
}

Conclusion

I really hope this article helped you understand the CSS position property and how it works.

As this is my first blog, please share your valuable feedback. Please like and share if you found this blog helpful. Thanks for reading.