CSS Positions: The Positioning Gamechanger.
Learn where to use what position and get the best out of it.
Full-stack software engineer with 2.5 years of experience building reliable, scalable web apps using JavaScript, TypeScript, React, Next.js, Node.js, and MongoDB. I enjoy creating clean, reusable UI components, integrating APIs, and improving performance through web vitals, code-splitting, and smart bundling. I regularly use Claude, GPT, Cursor AI, and custom automation workflows to speed up development and solve problems faster. I’ve also worked with AI agents, LLMs to simplify workflows and make features more intuitive for users. Above all, I care about writing maintainable code, collaborating well with teams, and designing systems that stay fast, stable, and easy to scale.
CSS Positioning:
The CSS Position property is used to position an element in the webpage, and how it'll position, will depend on the property we choose to give. We'll have came around those fixed navbars on the top and those sticky navbars and guess what, they are all done with the help of CSS Position. In This blog we'll be discussing when to use which css property to get the best out of it.
Syntax:
selector{
Position: Property;
}
Types of Positions:
1. Static Position:
Static Position is the default value of the position property. It have no effects in the positioning of any element.
2. Relative Position:
A Relative positioned element does not give any results, when {position: relative;} is applied to it. But when it is twiched with the left , right, top and bottom properties. It starts acting accordingly. If the element have left: 20px; that means from the place where it is positioned, it have to move 20px from left.
as we can see in the example:
3. Absolute Position:
The Absolutely Positioned element is removed from the document flow. The elements with whom it was a sibling, they leave no space for the element. The Absolute position is used to align the element in context to it's parent element, which have the property **{position:relative;}** in it.
as we can see in the example, we gave position: relative; to the element with ID "three" and gave it's child the {position: absolute} and give left and bottom values "0". That means the child will align relatively bottom-left to its parent.
4. Fixed Position:
When an item is position fixed, it is removed from the normal document flow and it'll be fixed to the viewport. So if even when scrolled through, it also scrolls, remaining at the same position. Syntax {position:fixed}
5. Sticky Position:
The Simplest explanation of sticky position is it sticks to the view port until it's relative parent is scrolled through. Syntax `{position:sticky;}.
Will Come again with such blogs.
Connect me: linkedin
