For Days 12 and 13 of my full stack journey, I focused on understanding the CSS position property. It controls how elements are placed on a page, and it’s more complex than it looks at first. Here's what I learned, along with simple examples:
✅ position: static
- This is the default value for all elements.
- The element stays in the normal flow of the document.
- You can’t move it using
top,left,right, orbottom.
📌 Example:
<div style="position: static; top: 20px;">I won’t move</div>
Even though top: 20px is written, the element won’t move at all.
✅ position: relative
- The element stays in the flow, but now you can move it.
- It moves relative to its original spot.
📌 Example:
<div style="position: relative; top: 20px; left: 30px;">I moved</div>
This will move the element 20px down and 30px to the right, from where it was originally placed.
✅ position: absolute
- Removes the element from the normal flow.
- Positions it based on the nearest parent that is not
static. - If there’s no positioned parent, it will position based on the
<body>.
📌 Example:
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0;">I'm inside</div>
</div>
Here, the inner box is absolutely positioned inside the outer div. It will stick to the top-left corner of the parent.
✅ position: fixed
- Removes the element from the flow.
- It stays fixed to the viewport (the screen).
- Doesn’t move when you scroll.
📌 Example:
<div style="position: fixed; top: 0; left: 0; background: black; color: white;">Fixed Header</div>
This element stays stuck to the top-left corner of the screen, even if you scroll the page.
✅ position: sticky
- A mix of
relativeandfixed. - Starts off like a normal element.
- Once you scroll past it, it sticks to a position (like the top).
📌 Example:
<h2 style="position: sticky; top: 0; background: white;">Sticky Heading</h2>
As you scroll, this heading will stick to the top of the page until its section scrolls out of view.
💭 Final Thought
I’m moving slow, but I’m not quitting.
Top comments (5)
growth like this is always nice to see. kinda makes me wonder - what keeps stuff going long-term? like, beyond just the early hype?
Appreciate that, Nevo 🙏
Honestly, I’ve been asking myself the same thing. Right now it’s just the little wins that keep me going — like finally understanding something that confused me for days.
Long-term? I’m hoping building real stuff and maybe finding a few people to learn with will help me stick with it.
What’s kept you in it?
We are both close in learning progress; we should build something together soon to fully understand how to work remotely with people. I'm using freecodecamp too to learn.
Keep going...it will be fruitful for you.
Thanks buddy,