DEV Community

Play Button Pause Button
Munin Borah
Munin Borah

Posted on

Day 12 & 13 / 200 (Full Stack)

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, or bottom.

πŸ“Œ Example:

<div style="position: static; top: 20px;">I won’t move</div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

This element stays stuck to the top-left corner of the screen, even if you scroll the page.


βœ… position: sticky

  • A mix of relative and fixed.
  • 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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
nevodavid profile image
Nevo David

growth like this is always nice to see. kinda makes me wonder - what keeps stuff going long-term? like, beyond just the early hype?

Collapse
 
munin-1 profile image
Munin Borah

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?

Collapse
 
joseph135 profile image
Joseph-135

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.

Collapse
 
kennedychukwu profile image
Kennedy Chukwu

Keep going...it will be fruitful for you.

Collapse
 
munin-1 profile image
Munin Borah

Thanks buddy,