Positioning in CSS

CSS position property

CSS position property helps to position HTML element on the page. This property is helpful when you want to position elements outside the normal flow.

What is Normal Flow?

The HTML elements are displayed in the order they are written. Normal flow is the way inline and block level elements are displayed on the webpage before making any changes to it. In normal flow,

• inline elements sit one after another in the same line and it doesn't start on the new line.
• block-level elements will always start with the new line and it will take the entire width available.

We can change the both inline and block-level element position with position property.

Syntax :

position: position-property;

Types :

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

Along with the types we also have something called the second set of properties. They are :

1. Top
2. Right
3. Bottom
4. Left
5. Z-index

The top, right, bottom, and left, properties specify how far away from the top/ right/ bottom/ left an element should be positioned.

• These properties have the value auto and the element is placed with a static position.
• These are calculated differently for different position properties.
• These properties accept both positive and negative values.

z-index property specifies the stack order of an element.

• Default value for z-index is 0
• Element with a larger z-index value overlaps an element with a smaller z-index value.
• z-index accepts positive and negative integers without any unit.

position: static;

• The static position is the default property for HTML elements.
• The elements appear in the normal flow of the document.
• Properties like top, right, bottom, left, and z-index doesn't have any effect on the content.
• Even though mentioning top and left, there is no change in the position of the element.

position: relative;

• When position: relative; is applied to an element it will appear in the normal flow of a document.
• It can accept values for the top, right, bottom, left, and z-index.

• Relative position always takes its position, relative to the parent's position.

position: absolute;

• When position: absolute; is applied to an element it will appear in the normal flow of a document given its parent has a position other than position: static;.
• It can accept values for the top, right, bottom, left, and z-index.

• If position: absolute; doesn't have a parent element that is positioned to position: relative; then it takes the initial boundary as a browser window and it will position according to it and the element will adjust according to the browser window, not to the parent.
• It can overlap other elements depending on the z-index value.

position: fixed;

• When position: fixed; is applied to an element it will be fixed to the browser's viewport given the parent having any position property
• When the position: fixed; element will not move when scrolled.

position: sticky;

• position: sticky; is a hybrid between relative and fixed position.
• When position: sticky; is applied to an element, it is positioned in the normal flow of the document similar to Relative Position.
• It is positioned relative until it reaches the offset value specified in top, right, bottom, and left and once it crosses the offset value then it is positioned to fixed.

Conclusion

So we have learned everything about CSS Position property. I hope my article helped you to understand the concept in an easy way. The best way to get better at CSS position property is to play around with it. Share your feedback and thoughts. If you find the article useful then share it with your friends. Follow me on Linkedin, Twitter, Instagram, Github.