What is Static(Default):
Every HTML element is static by default. It just follows the normal page flow — top to bottom, left to right. can’t move it using top, left, or anything like that.It’s simple, and don’t need any special layout.
Position: relative
can shift the element based on where it originally was. give top: 20px, it’ll move down 20 pixels.But here’s the key — the element still reserves its original space. when want to move things a bit without breaking layout.
position:absolute
It positions itself based on the nearest positioned parent.If there’s no parent, it uses the whole page. place it anywhere with top, left, and so on.It is useful for pop-ups, tooltips, and fancy layouts.
position:fixed
This one sticks to the browser window.
So no matter how much scroll, it stays there — like a chat icon, or a sticky footer. It's great when want something to always be visible.
position:sticky
It’s like a mix of relative and fixed.At first, it scrolls normally.But once it reaches a certain scroll position — boom — it sticks in place!
** Meet you in the next blog**
Top comments (0)