Positioning Elements: The Secrets of CSS Layouts

CSS positioning – how to control where elements sit on a page. Understanding static, relative, absolute, fixed, and sticky is essential for layouts that go beyond normal document flow.

The basics of positioning

CSS positioning controls where and how elements are placed. There are five schemes:

• Static positioning: The default. Elements follow normal document flow.
• Relative positioning: Offsets an element from its normal position.
• Absolute positioning: Removes an element from normal flow and positions it relative to its nearest positioned ancestor.
• Fixed positioning: Positions an element relative to the browser viewport.
• Sticky positioning: A mix of relative and fixed – the element sticks once it reaches a threshold.

Relative positioning

Moves an element relative to where it would normally sit in the document flow.

Example

.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

That shifts the element 10 pixels down and 20 pixels right from its original spot.

Absolute positioning

Absolute positioning takes an element out of normal flow. It positions relative to the nearest ancestor that has a position other than static – not the viewport (that is fixed positioning).

Example

<div class="container">
    <div class="absolute-box">I'm absolutely positioned!</div>
</div>

.container {
    position: relative; /* Acts as a reference for the absolute box */
}

.absolute-box {
    position: absolute;
    top: 15px;
    right: 10px;
}

.absolute-box sits 15 pixels from the top and 10 pixels from the right of its parent .container.

Fixed positioning

Fixed positioning locks an element to the viewport. Common for nav bars that stay visible while scrolling.

Example

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
}

The nav bar stays at the top of the screen when the user scrolls.

Sticky positioning

Sticky behaves like relative positioning until the element reaches a set point, then it sticks like fixed positioning.

Example

.header {
    position: sticky;
    top: 0;
}

The header scrolls normally until it hits the top of the viewport, then it stays there.

Z-index: managing layering

When positioned elements overlap, z-index controls which sits on top.

Example

.back {
    position: absolute;
    z-index: 1;
}

.front {
    position: absolute;
    z-index: 2;
}

.front appears above .back.

Practical positioning tips

1. Start with a plan: Sketch the layout before reaching for absolute positioning.
2. Use relative positioning sparingly: Fine for small nudges, but it gets messy in complex layouts.
3. Understand stacking contexts: z-index only works on positioned elements (anything other than static).
4. Try sticky positioning: Useful for headers, footers, and sidebars that should stay visible partway through a scroll.

Responsive design and positioning

You may need to change positioning at different viewport sizes – for example, resetting a sidebar to normal flow on mobile:

Example with media query

@media screen and (max-width: 600px) {
    .sidebar {
        position: static; /* Resets to normal document flow on small screens */
    }
}

Positioning takes practice. Build a few small layouts with absolute and sticky elements, and the behaviour will start to feel predictable.