Alright, so today’s little adventure is all about tackling the ‘position’ property in CSS. Sounds simple, right? Well, let’s dive in and see how I messed around with it.
First off, I wanted to get a solid grasp on the basics. So, I started with a simple HTML structure – a container div and a few child divs inside. Nothing fancy, just enough to play around with.
- The setup: A main
<div>with class “container”, holding three<div>elements with classes “box-1”, “box-2”, and “box-3”. - The goal: To understand how
position: static,position: relative,position: absolute,position: fixed, andposition: stickyactually behave.
I started by setting the position of all boxes to static. Of course, nothing interesting happened. They just flowed normally in the document.
Then, I decided to mess with position: relative. I set the position of box-2 to relative and then used top and left properties to move it around. That’s when I noticed the key thing – it shifted relative to its normal position, and it left a gap behind! Okay, good to know. I wrote down, “Relative moves the element but keeps its original space”.
Next up, position: absolute. This one was a bit trickier. I set box-3 to position: absolute. Initially, it didn’t seem to do much, but then I realized I hadn’t set any top, left, right, or bottom values. Once I did, boom! It jumped out of the normal flow of the document. The kicker was understanding that it’s positioned relative to its nearest positioned ancestor. If there’s no positioned ancestor, it goes all the way up to the <body>. I learned that the hard way after a lot of head scratching. I added in my notes, “Absolute is based on the parent’s position!”
position: fixed was the easiest to grasp. I set the position of box-1 to fixed and gave it some top and left values. It stayed exactly where I told it to, even when I scrolled the page. Super straightforward. It also doesn’t take up space, which is awesome. Wrote down, “Fixed is fixed to the viewport”.
Finally, position: sticky. This one was the most interesting and also took me a bit to get right. I set box-1‘s position to sticky and defined a top value. The element behaved like position: relative until I scrolled past the specified threshold (in this case, the top value). Once I hit that point, it “stuck” to the top of the viewport. Pretty cool for headers and stuff. Note to self, “Sticky needs a scrollable parent!”.
The gotchas: I spent a good chunk of time debugging why absolute positioning wasn’t working as expected. Turns out, I had forgotten to set a positioned ancestor for the element. Classic mistake! Always check your parent elements!
All in all, it was a fun and educational session. I now feel way more confident using the position property in my projects. Time to go break something else!
