Learn

Lesson 14 / Layout

CSS Positioning

Time
37 min
Type
Reading + Practice
Level
Intermediate

Use CSS positioning to precisely control element placement, stacking, sticky headers, and layered components.

Teacher Notes / In-Class Use

Demo Live

  • Model the core workflow from the lesson using a small class example.
  • Connect the example back to the first goal: Understand static, relative, absolute, and fixed positioning

Try In Class

  • Create one relatively positioned element.
  • Have students make one visible change, save, refresh, and explain what changed.

Submit Or Check

  • Ask students to show the work in the browser, not only in the editor.
  • Have students commit their progress with a clear message when the checkpoint is stable.

Watch For

  • Students copying code without checking file paths, spelling, or capitalization.
  • Visual changes that work locally but break when the project is published.

Learning Goals

  • Understand static, relative, absolute, and fixed positioning
  • Use top, right, bottom, left, and positioned ancestors correctly
  • Use z-index and positioning to control layer order and avoid common layout issues

Introduction

CSS Positioning allows you to precisely control the placement of elements on a web page.

By understanding the different positioning techniques, you can create complex layouts and dynamic effects.

Understanding the Basics: Static Positioning

Imagine your website as a bustling city. Each element, like a building or a tree, has its own designated spot.

By default, elements are placed in this natural order, one after the other. This is known as static positioning.

.element {
  position: static;
}

Beyond the Ordinary: Relative Positioning

With relative positioning, you can nudge elements around from their original positions using top, right, bottom, and left.

This technique keeps the element in the document flow while adjusting its visual position.

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

Absolute Positioning: Taking Control

Absolute positioning removes an element from the document flow and places it exactly where specified, relative to its closest positioned ancestor.

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

Fixed Positioning: Locking Elements in Place

Fixed positioning locks an element in place relative to the browser window. It does not move when the user scrolls.

.site-alert {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Advanced Techniques

Once you understand positioning basics, you can control layers, fixed UI, sticky headers, and overlapping visual components.

Z-index: Controlling the Layer Order

The z-index property determines the stacking order of elements. Elements with higher z-index values appear on top of those with lower values.

In this example, .element-2 appears above .element-1, and .element-3 is beneath both.

.element-1 {
  position: relative;
  z-index: 1;
}

.element-2 {
  position: relative;
  z-index: 2;
}

.element-3 {
  position: relative;
  z-index: 0;
}

Practical Examples

Positioning is useful for navigation, layered cards, badges, overlays, alerts, and scroll-based interface patterns.

Example: The Sticky Header

A sticky header stays fixed at the top of the viewport as you scroll.

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

Example: Card Component

A card component can use layered content and a background image.

.card {
  position: relative;
  overflow: hidden;
}

.card-content {
  position: relative;
  z-index: 1;
}

.card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Common Pitfalls and Troubleshooting

  • Overlapping Elements: Use proper z-index and positioning to manage layers.
  • Relative Positioning Confusion: Remember it's relative to the element's original position.
  • Cross-Browser Differences: Always test your layout on different browsers.
  • Complex Layouts: Combine positioning with CSS Grid or Flexbox when needed.

Checkpoint

Before moving on, make sure these feel true.

  • I can explain the main concept in my own words.
  • I can apply this lesson to my current project.
  • I can verify the result in the browser.
  • I can commit the change with a clear message.

Practice

  • Create one relatively positioned element.
  • Add an absolutely positioned badge inside a card.
  • Build a sticky header.
  • Use z-index to control overlapping layers.