CSS Positioning

CSS positioning is the method of how you inform the browser to position element exactly on page. All elements naturally are positioned on top of each other depending on where they are located in your HTML (called the Normal Flow)

The position property allows you to break that flow to create layouts, sticky headers, or overlapping elements.

1. Static (The Default)

By default, everything is static. It just like moving along with the normal flow of the page.

• Key behavior: Properties like top, bottom, left, or right do not work here.
• An analogy: A person stands in a single line. They will only move if the first person in front of them moves.

2. Relative

An element with position: relative; remains in the normal document flow, but it allows you to “nudge” the element without disrupting any other elements in the flow.

• Key behavior: If you move it 20px to the right, it moves, but the “hole” it left behind remains empty. Other elements won’t move to fill the gap.
• Common Use: It is most often used as a container for absolute-positioned children.

3. Absolute

Now this is the fascinating part. When you absolute a element, it takes your element out of the normal flow of things. The reading pattern flows around the element.

• Key behavior: It is positioned relative to its closest positioned ancestor. positioned means an element that is either relative, absolute or fixed. If there is no positioned ancestor found, it is positioned relative to the whole page.
• Analogy: A “Post-it” note. You can stick it anywhere on a specific page, regardless of the text underneath.

4. Fixed

Similar to absolute, but it ignores the parents and the scroll bar entirely.

• Key behavior: It sticks to the viewport (the browser window). Even if you scroll down a mile, a fixed element stays in the exact same spot on your screen.
• Common Use: Navigation bars or “Back to Top” buttons.

5. Sticky

This is a hybrid of relative and fixed.

• Key behavior: It acts like a normal element until you scroll to a specific point (like top: 0), at which point it “sticks” to the screen and follows you. It stays “stuck” only until it reaches the end of its parent container.
• Common Use: Section headings in a long list or table headers.

Quick Comparison Table

The Z-Index (The Third Dimension)

When you start positioning things, they will eventually overlap. The z-index property acts like a layer priority.

• z-index: 1 is the bottom layer.
• z-index: 999 is the top layer.
• Note: z-index only works on elements that have a position other than static.

Check out our resources!

• Bootstrap Templates: Explore our Bootstrap Projects section.
• Free E-Books: Download your Free E-Books here.