CSS Position

CSS Position: The Property That Changed the Way I Build Web Pages

When I first started learning CSS, I thought designing a webpage was just about changing colors, fonts, and spacing. Everything seemed easy until I wanted to place an element exactly where I wanted it. That's when I came across the position property.

At first, I didn't understand the difference between relative, absolute, fixed, and sticky. They all sounded similar, and I often used the wrong one. But after practicing with small projects, I realized that each position value has its own purpose. Once I understood them, creating layouts became much easier.

In this blog, I'll explain CSS positioning in the same simple way that helped me understand it.

What is the CSS Position Property?

The position property tells the browser how an element should be placed on a webpage. It also decides whether properties like top, right, bottom, and left can be used to move the element.

CSS provides five types of positioning:

• Static
• Relative
• Absolute
• Fixed
• Sticky

Let's look at each one with simple explanations.

---

1. Static Position

This is the default position for every HTML element. If you don't write any position property, the browser automatically uses static.

Elements appear in the normal order from top to bottom. Even if you try to use top or left, nothing will happen because those properties don't work with static positioning.

Example

.box {
    position: static;
}

When should you use it?

Honestly, most of the time you don't even have to think about it. If your webpage looks fine without moving elements around, static positioning is enough.

---

2. Relative Position

Relative positioning was the first one that actually made sense to me.

When you use position: relative, the element stays in its original place, but you can move it using top, left, right, or bottom. Even after moving it, the browser still remembers its original space.

Example

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Think of it like this

Imagine your chair is in your room. You drag it a little to the right, but everyone still remembers where the chair originally belonged. That's exactly how relative positioning works.

Common uses

• Adjusting the position of buttons or icons
• Creating a parent element for absolute positioning
• Making small layout changes without affecting other elements

---

3. Absolute Position

This was the most confusing position for me in the beginning.

An absolutely positioned element leaves the normal document flow. Instead of following the regular layout, it is positioned relative to its nearest parent that has a position other than static.

If there isn't one, the element is positioned relative to the entire page.

Example

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 15px;
    right: 15px;
}

When I first forgot to add position: relative to the parent, my element suddenly jumped to the corner of the webpage. That's a mistake almost every beginner makes.

Common uses

• Notification badges
• Icons inside input boxes
• Text on images
• Pop-up elements

---

4. Fixed Position

Fixed positioning is one of the easiest to understand.

A fixed element stays in the same place on the screen, even when the user scrolls the page.

Example

.help-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

You have probably seen this on many websites.

A WhatsApp chat button, a "Back to Top" button, or a customer support icon usually stays in one place while you scroll. That's because it uses fixed positioning.

---

5. Sticky Position

Sticky positioning feels like a combination of relative and fixed.

At first, the element behaves normally. Once you scroll to a certain point, it sticks to the top of the screen and stays there until its parent section ends.

Example

.header {
    position: sticky;
    top: 0;
}

This is commonly used for navigation bars because users can always see the menu while reading a long page.

---

Understanding Top, Right, Bottom, and Left

These properties help move positioned elements.

.box {
    position: absolute;
    top: 30px;
    left: 40px;
}

• top moves the element down from the top.
• bottom moves it up from the bottom.
• left moves it right from the left edge.
• right moves it left from the right edge.

These properties won't work if the element uses position: static.

---

My Biggest Mistakes While Learning Position

Like many beginners, I made a few mistakes.

The first mistake was trying to use top and left with static positioning. I kept wondering why nothing changed.

The second mistake was forgetting to give the parent element position: relative before using position: absolute on the child. Because of that, my element appeared in completely unexpected places.

I also tried to build entire page layouts using only absolute positioning. Later I learned that Flexbox and CSS Grid are much better choices for creating responsive layouts.

---

When Should You Use Each Position?

Here's the simple rule I follow now:

• Use Static for normal content.
• Use Relative when you need to move an element slightly or create a reference for child elements.
• Use Absolute for badges, overlays, and icons.
• Use Fixed for floating buttons and permanent navigation.
• Use Sticky for menus or headers that should stay visible while scrolling.

---