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
relative
andfixed
. - 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,