Positioning with Style

The Grand Dance of Elements

Welcome to the enigmatic art of CSS positioning, where you, like a master magician, place your elements exactly where you want them. Some elements obediently stay in their spots, while others can be nudged, anchored, or made to float gracefully above the rest of the page with a mere flick of your wand.

It’s a bit like a ballroom: some elements dance elegantly in line, others break formation, and a few seem to hover in mid-air, blissfully ignoring their peers. In the lessons ahead, you’ll learn to direct your elements like a maestro. They’ll jump, stick, glide, or stubbornly hold their ground. The magic of positioning grants you control over every piece of your website’s choreography.

Let’s Keep Going

Static
Relative
Absolute

Fixed
Sticky
Z-Index

Who Stands Where?

Whether fixed, sticky, or completely floating—this is where it’s decided who stands where.

Static

The Boring Default

When elements don’t realize they can join the dance, they obediently stay in place. static is the default position every element starts with, still and orderly. They remain exactly where they are in the HTML code, without complaint. Boring, right? But don’t worry—you’ll soon discover how to lure them onto the dance floor!

.element {
    position: static;
}

position: static specifies that an element remains in the normal document flow and receives no special positioning. Simple, straightforward, and ready for the basics!

Relative

Positioning in Small Steps

With relative, you tell an element: “You can stay in your spot, but you’re allowed a little wiggle room.” It moves relative to its normal position without disturbing the rest of the page. This lets you nudge an element slightly up, down, left, or right, as if it’s brimming with a bit of extra energy.

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

Here, the element is shifted relative to its normal position: 10px downward
and 20px to the right.

Absolute

The Free Spirit

absolute is for those elements that couldn’t care less about the rest of the page. They leave the normal document flow and position themselves relative to their nearest positioned ancestor. Here, the element dances to its own rhythm, completely ignoring its neighbors.

.container {
    position: relative;
}

.element {
    position: absolute;
    top: 50px;
    right: 100px;
}

The .element is positioned relative to the .container class, 50px from the top and 100px from the right.

Fixed

The Stubborn One

fixed is the position for elements that refuse to budge, no matter how far you scroll up or down the page. They stay locked in place, like a treasure chest secured with an unyielding lock, guarding their spot with unwavering determination.

.element {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

The .element is fixed and always remains 10px from the bottom and right edges of the viewport.

Sticky

The Sticky One

sticky is the trickster among positioning styles. At first, the element behaves and stays in its line, but as soon as the user scrolls, it suddenly sticks in place. A bit like a sticky note that stubbornly holds its spot.

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

The .element remains scrollable until it reaches the top edge of the container, where it “sticks” in place.

Z-Index

The Master of Layers

When your elements overlap, the z-index comes into play. It decides who dances on top and who stays below. The higher the z-index, the higher the element floats in the layout stack. This gives you control over who takes center stage and who remains in the background.

.element {
    position: absolute;
    z-index: 10;
}

The .element is positioned absolutely and placed above other elements with z-index: 10.

In this lesson, you have learned…

How to use position: static to keep elements in the normal document flow without any extra movement or adjustment.
Why position: relative is useful for shifting elements without completely leaving their original position.
How position: absolute works by removing elements from the normal flow and placing them relative to the nearest positioned ancestor.
Why position: fixed is ideal for fixed navigation elements, as they stay in place when scrolling.
How position: sticky behaves dynamically by acting normal at first, then “sticking” at a specified point during scrolling.
What z-index is used for: to arrange elements on different layers and ensure important content isn’t hidden by others.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Art of Positioning

Umbra, the cunning shadow-dancer, glides through the dark halls of the shadowy fortress, always one step ahead and hidden from view. Her illusions are masterpieces, but with the arts of CSS positioning, you can unveil her tricks. Learn to place elements precisely—be they fixed, absolute, or relative—and bring light to her deceptive shadows.

Your Task: Position Your Boxes

Apply basic structure and positioning: Experiment with different positioning types: static, relative, absolute, fixed, and sticky to arrange your boxes. Observe how the boxes behave and overlap depending on their positioning.
Combine relative and absolute positioning: Set one box to relative and another to absolute. Move the boxes using top, left, right, or bottom and see how the absolute box positions itself relative to the relative one.
Fixed positioning and scrolling: Apply the fixed positioning to anchor a box permanently in the viewport, even while scrolling. Notice how it appears in relation to other positioning types.
Understand sticky positioning: Set a box to sticky and observe how it sticks to the top of the viewport while scrolling. Test its behavior to understand when it adheres to its position.
Z-index and overlaps: Use z-index to control the layering of the boxes. Compare how different z-index values affect the order and visibility of the elements.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

/* Static */
.static {
    border: 2px solid #f39c12;
    background: linear-gradient(135deg, #f1c40f, #f39c12);
}

/* Relative */
.relative {
    position: relative;
    left: 30px;
    top: 20px;
    border: 2px solid #3498db;
    background: linear-gradient(135deg, #5dade2, #3498db);
}

/* Absolute */
.absolute {
    position: absolute;
    right: 20px;
    top: 50px;
    border: 2px solid #e74c3c;
    background: linear-gradient(135deg, #ec7063, #e74c3c);
}

/* Fixed */
.fixed {
    position: fixed;
    bottom: 20px;
    left: 20px;
		z-index: 10;
    /* own styles */
    border: 2px solid #2ecc71;
    background: linear-gradient(135deg, #58d68d, #2ecc71);
}

/* Sticky */
.sticky {
    position: sticky;
    top: 20px;
    z-index: 5;
    /* own styles */
    border: 2px solid #9b59b6;
    background: linear-gradient(135deg, #af7ac5, #9b59b6);
}

/* Z-Index */
.z-container {
    position: relative;
    margin-top: 40px;
    height: 200px;
}

.z-layer-1 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 100px;
    z-index: 1;
    /* own styles */
    background: linear-gradient(135deg, #2980b9, #3498db);
    border: 2px solid #2980b9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.z-layer-2 {
    position: absolute;
    top: 30px;
    left: 120px;
    width: 200px;
    height: 100px;
    z-index: 2;
    /* own styles */
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    border: 2px solid #27ae60;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.z-layer-3 {
    position: absolute;
    top: 10px;
    left: 190px;
    width: 200px;
    height: 100px;
    z-index: 3;
    /* own styles */
    background: linear-gradient(135deg, #e74c3c, #ec7063);
    border: 2px solid #e74c3c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

Let’s Keep Going