AI App Development from Zero Knowledge – 1000 Hours #6

6: Stay Put, Button. – Escaping the CSS Positioning Hell

Summary
In this episode, I talk about my struggle with CSS positioning—relative, absolute, and fixed—and how those properties caused my layout to break in unexpected ways. With the help of AI, I finally understood the rules behind “which element is the reference point” and learned how to place elements exactly where I wanted. I also explain common beginner pitfalls and how to overcome them.

No matter how much I adjusted it, the button just wouldn’t land where I wanted on the screen.
“Is it the margin? The padding? Or maybe top or left?” I tweaked everything endlessly, but nothing worked.
That’s when AI explained to me that the positioning in CSS is based on parent-child relationships—and that changed everything.

---

The Three Confusing Siblings: relative, absolute, fixed

At first, when I was told “relative is the parent, and absolute is the child,” it didn’t make any sense.

But AI used metaphors like “a sofa and a cushion” or “a flyer taped to the ground” to help me understand:

• relative: Like a sofa — something that becomes the reference point for others
• absolute: A cushion placed on that sofa — it can move freely, but based on the sofa’s position
• fixed: A flyer taped to the wall — it stays in the same place no matter how you scroll

---

Chaos on the Front Lines

.status-box {
  position: absolute;
  bottom: -240px;
  right: 20px;
}

When I saw this code, I panicked.
“bottom: -240px?! That’s a minus! Doesn’t that send it off the screen!?”

But again, AI calmly explained that this value means the element is escaping relative to its parent—so it finally clicked.

---

Fixed Position: The Lone Wolf

To create a blurred background, I used this CSS:

.settings-background {
  position: fixed;
  top: 0;
  left: 0;
}

This element doesn’t care about its parent at all.
It positions itself based on the entire screen (window), and stays there even when the page scrolls.
Using this trait, I managed to blur the background image and keep it fixed full-screen.

---

Learning Through Trial and Error

To be honest, I used to get a headache just hearing the word “CSS.”
But little by little, I started recognizing things like “Ah, this must be the parent” and “This is how the child behaves.”
Each understanding gave me a small but solid confidence boost.

Whenever I felt frustrated by broken layouts, instead of giving up, I turned to AI.
And that one step—just asking—helped me move forward.
Getting buttons and messages to appear exactly where I envisioned is oddly addictive.

You don’t need perfection.
Even just a “Hey, I think I’m starting to get it” is enough.
Each step adds up—and I’m starting to feel that, for real.