CSS - Positioning

Jun 17, 2026 3:00pm UTC (Check your timezone)

Theory Workshop Lab Review Quiz

Instructors: Jess, Carmen, and Eda

Positioning

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Understanding How to Work with Floats and Positioning in CSS: What Are Common Use Cases for Using Floats, and How Do They Work?

Floats are nowadays less commonly used as we have modern CSS features like Flexbox and Grid, we might come across them in older CSS code.

A floated element is taken out of the normal document flow and is placed on the left or right side of its container, letting text and inline elements wrap around it. It’s removed from the normal flow, but it’s still a part of the flow (unlike absolute positioning, which we’ll see in this session!).

For example, to wrap text around an image, we can float the image to the left:

1<div class="container">
2  <img src="https://placehold.co/150x150" alt="Placeholder Image">
3  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium ex sed justo hendrerit, nec posuere enim viverra. Donec a diam tempor, molestie orci eget, varius mauris. In ultricies et metus quis imperdiet. Quisque bibendum enim in elit suscipit, quis luctus mauris scelerisque. Nunc imperdiet odio vitae nunc rutrum convallis. Quisque vitae gravida magna. Quisque tincidunt vel justo ut facilisis. Suspendisse luctus congue est, ac pharetra turpis faucibus non. Mauris iaculis, ex vel facilisis mollis, leo libero feugiat urna, ac efficitur velit eros at neque. Maecenas ex neque, finibus quis risus ut, tincidunt luctus est. Aenean pulvinar pretium tristique. Fusce quis blandit tellus. Vestibulum sit amet viverra augue. Morbi ac auctor dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed non tempus justo.</p>
4</div>
1.container {
2  padding: 10px;
3}
4
5img {
6  float: left;
7  margin-right: 20px;
8}

Before Flexbox and Grid, floats were also used to create multi-column layouts by floating elements next to each other. To prevent the container from collapsing, a clearfix technique is applied:

1<div class="container">
2  <img src="https://placehold.co/150x150" alt="Placeholder Image">
3  <p> This is an example of text flowing around a floated image.</p>
4</div>
 1.container {
 2  border: 1px solid black;
 3}
 4
 5/* Clearfix CSS */
 6.container::after {
 7  content: "";
 8  display: block;
 9  clear: both;
10}
11
12img {
13  float: left;
14  margin-right: 20px;
15}

(In this clearfix CSS, ::after adds an invisible block after the content of the container, content: "" ensures we don’t display any content in this pseudo-element, display: block makes it a block-level element, clear: both ensures that both sides of the floated elements above are moved below.)

Understanding How to Work with Floats and Positioning in CSS: What Is Relative Positioning, and How Does This Differ from the Default Static Positioning?

The elements on the page by default have static positioning, that is, they follow the document flow from top to bottom, left to right.

Relative positioning is when an element is positioned differently from its normal flow without disrupting the flow. With relative positioning, we essentially move the element by giving it new coordinates.

1.relative {
2  position: relative;
3  top: 30px;
4  left: 30px;
5}

Understanding How to Work with Floats and Positioning in CSS: What Is Absolute Positioning, and How Does It Work?

When an element is absolutely positioned, it’s taken out of the normal document flow, placed in its own layer, and is independent from other elements. By default, it’s placed relative to the closest positioned ancestor. If there’s no positioned ancestor, it will be positioned relative to the initial containing block (which is usually the browser’s viewport).

1.positioned {
2  position: absolute;
3  top: 30px;
4  left: 30px;
5}

Absolute positioning is useful for creating floating UI elements such as modals, tooltips, dropdown menus, etc.

Let’s see how relative and absolute positioning are different from each other.

If we have three divs:

1<div></div>
2<div></div>
3<div></div>

We can first see that they are positioned statically, in normal document flow:

1div {
2  border: 1px solid black;
3  width: 40px;
4  height: 40px;
5  margin-bottom: 1rem;
6}

Three boxes are displayed from top to bottom.

If we position the second one relatively:

1div:nth-child(2) {
2  position: relative;
3  top: 30px;
4  left: 30px;
5  background-color: hotpink;
6}

It looks like this (note that it does not disrupt the document flow):

Three boxes are displayed from top to bottom. The second one has a background color of hotpink and is placed independently 30 pixels to the right, 30 pixels down, not disrupting the normal document flow.

If we use absolute positioning this time:

1div:nth-child(2) {
2  position: absolute;
3  top: 30px;
4  left: 30px;
5  background-color: hotpink;
6}

The element is no longer in the normal document flow and behaves independently:

Three boxes are displayed from top to bottom. The second one has a background color of hotpink and is placed independently 30 pixels to the right, 30 pixels down outside of normal document flow.

Understanding How to Work with Floats and Positioning in CSS: What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning?

If an element has a fixed position, it’s removed from the normal document flow, and it stays relative to the viewport, staying in the same position even when the user scrolls the page.

It’s useful for headers and navigation bars that remain visible at all times.

1<header>
2  <h1>Fixed Header</h1>
3</header>
4
5<p>
6Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum scelerisque nisl. In nec imperdiet ex. Fusce eget mauris id risus lobortis dapibus nec ut lectus. Aliquam luctus metus in arcu fermentum, vel imperdiet urna elementum. Maecenas vitae odio risus. Pellentesque nec nisl dictum, aliquam mi id, elementum dui. Suspendisse at sem iaculis orci gravida ullamcorper vitae ac odio. Mauris a vestibulum lacus, quis consectetur nisi. Nunc enim turpis, luctus at massa a, sagittis pulvinar tellus. Phasellus aliquet iaculis est ut ultrices. Sed lobortis velit libero, vel mattis metus vestibulum at. Nunc sed scelerisque enim, maximus porttitor nibh. Nullam condimentum id quam et ornare. Cras at ante quis ex laoreet egestas sit amet nec arcu. Duis consequat condimentum mi, ut mattis dui. Sed accumsan pellentesque feugiat. Integer feugiat mi sit amet ante gravida viverra. Integer a dui eros. Nullam maximus diam tortor, sit amet rutrum nulla molestie sit amet. Cras posuere, velit in tempor elementum, tellus est dictum leo, id sollicitudin sem elit lobortis sapien. Proin vel turpis quis massa rutrum consequat. Cras semper dui ac mauris congue ultrices. Sed fringilla vulputate ex vel feugiat. Etiam imperdiet ligula purus, a tincidunt magna vehicula in. Donec sodales molestie magna, nec vulputate ligula tempor fermentum. Integer facilisis dui nec lectus rutrum aliquet. Ut at massa sit amet eros iaculis finibus. Proin ut facilisis sapien. Nulla commodo imperdiet justo vitae lobortis. Nulla congue velit at imperdiet lobortis. Vestibulum dictum efficitur volutpat. Curabitur vel lacinia elit. Curabitur in ligula vel metus sagittis lobortis. Nulla sit amet orci risus. Aliquam luctus massa sed pellentesque condimentum. Mauris porttitor quam sed rhoncus faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque et dictum sapien. Integer iaculis odio a turpis lobortis, et ultricies augue vestibulum. Proin accumsan tellus in sapien iaculis, id viverra massa suscipit. Cras eget ipsum elementum, aliquam velit et, blandit sem. Phasellus varius lectus a sem tristique tincidunt. Mauris quis egestas erat, vitae tempor leo. Proin placerat erat accumsan risus feugiat dapibus. Donec lacinia nec erat nec iaculis. Fusce ullamcorper consequat velit, in elementum purus hendrerit ut. Cras vel erat turpis. Ut faucibus semper odio, sit amet facilisis felis tincidunt id. Duis auctor hendrerit dolor, eget faucibus tortor semper ut. Fusce pulvinar ex ante, eleifend accumsan risus egestas lacinia. Ut fermentum elit nibh, non tincidunt leo cursus in. Vestibulum et leo orci. Cras feugiat dignissim dolor, vitae finibus lorem semper in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean suscipit sagittis arcu, aliquet tristique lacus aliquet quis. Integer gravida lacus volutpat mattis venenatis. Curabitur quis massa nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas elit vitae sagittis pretium. Aenean quis lacus id mi tristique dictum. In quis enim in risus dapibus consectetur vel a orci. Nunc aliquet velit eu nibh dignissim ultricies. Sed egestas risus eros. Sed tempus nibh sed lectus gravida cursus. Nam bibendum molestie sem, euismod lobortis tellus viverra nec. Vivamus eu metus convallis sem tempor facilisis. Curabitur blandit feugiat dictum. Nulla dui ligula, egestas eu tempor id, euismod quis purus. In justo velit, fringilla sit amet congue ac, pulvinar quis tellus. Nam at sapien viverra, gravida libero sed, elementum nunc. Donec id pulvinar nunc.
7</p>
 1header {
 2  position: fixed;
 3  top: 0;
 4  left: 0;
 5  width: 100vw;
 6  background: hotpink;
 7  color: white;
 8  padding: 10px;
 9  border-bottom: .25rem solid black;
10}

If an element is positioned as sticky, the element stays in normal document flow, but when the page is scrolled a certain point, it “sticks” to the viewport (usually the top) and behaves as though it is fixed.

1<header>
2  <h1>Sticky Header</h1>
3</header>
4
5<p>
6Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum scelerisque nisl. In nec imperdiet ex. Fusce eget mauris id risus lobortis dapibus nec ut lectus. Aliquam luctus metus in arcu fermentum, vel imperdiet urna elementum. Maecenas vitae odio risus. Pellentesque nec nisl dictum, aliquam mi id, elementum dui. Suspendisse at sem iaculis orci gravida ullamcorper vitae ac odio. Mauris a vestibulum lacus, quis consectetur nisi. Nunc enim turpis, luctus at massa a, sagittis pulvinar tellus. Phasellus aliquet iaculis est ut ultrices. Sed lobortis velit libero, vel mattis metus vestibulum at. Nunc sed scelerisque enim, maximus porttitor nibh. Nullam condimentum id quam et ornare. Cras at ante quis ex laoreet egestas sit amet nec arcu. Duis consequat condimentum mi, ut mattis dui. Sed accumsan pellentesque feugiat. Integer feugiat mi sit amet ante gravida viverra. Integer a dui eros. Nullam maximus diam tortor, sit amet rutrum nulla molestie sit amet. Cras posuere, velit in tempor elementum, tellus est dictum leo, id sollicitudin sem elit lobortis sapien. Proin vel turpis quis massa rutrum consequat. Cras semper dui ac mauris congue ultrices. Sed fringilla vulputate ex vel feugiat. Etiam imperdiet ligula purus, a tincidunt magna vehicula in. Donec sodales molestie magna, nec vulputate ligula tempor fermentum. Integer facilisis dui nec lectus rutrum aliquet. Ut at massa sit amet eros iaculis finibus. Proin ut facilisis sapien. Nulla commodo imperdiet justo vitae lobortis. Nulla congue velit at imperdiet lobortis. Vestibulum dictum efficitur volutpat. Curabitur vel lacinia elit. Curabitur in ligula vel metus sagittis lobortis. Nulla sit amet orci risus. Aliquam luctus massa sed pellentesque condimentum. Mauris porttitor quam sed rhoncus faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque et dictum sapien. Integer iaculis odio a turpis lobortis, et ultricies augue vestibulum. Proin accumsan tellus in sapien iaculis, id viverra massa suscipit. Cras eget ipsum elementum, aliquam velit et, blandit sem. Phasellus varius lectus a sem tristique tincidunt. Mauris quis egestas erat, vitae tempor leo. Proin placerat erat accumsan risus feugiat dapibus. Donec lacinia nec erat nec iaculis. Fusce ullamcorper consequat velit, in elementum purus hendrerit ut. Cras vel erat turpis. Ut faucibus semper odio, sit amet facilisis felis tincidunt id. Duis auctor hendrerit dolor, eget faucibus tortor semper ut. Fusce pulvinar ex ante, eleifend accumsan risus egestas lacinia. Ut fermentum elit nibh, non tincidunt leo cursus in. Vestibulum et leo orci. Cras feugiat dignissim dolor, vitae finibus lorem semper in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean suscipit sagittis arcu, aliquet tristique lacus aliquet quis. Integer gravida lacus volutpat mattis venenatis. Curabitur quis massa nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas elit vitae sagittis pretium. Aenean quis lacus id mi tristique dictum. In quis enim in risus dapibus consectetur vel a orci. Nunc aliquet velit eu nibh dignissim ultricies. Sed egestas risus eros. Sed tempus nibh sed lectus gravida cursus. Nam bibendum molestie sem, euismod lobortis tellus viverra nec. Vivamus eu metus convallis sem tempor facilisis. Curabitur blandit feugiat dictum. Nulla dui ligula, egestas eu tempor id, euismod quis purus. In justo velit, fringilla sit amet congue ac, pulvinar quis tellus. Nam at sapien viverra, gravida libero sed, elementum nunc. Donec id pulvinar nunc.
7</p>
1header {
2  position: sticky;
3  top: 0;
4  left: 0;
5  background: hotpink;
6  color: white;
7  padding: 10px;
8  border-bottom: .25rem solid black;
9}

Understanding How to Work with Floats and Positioning in CSS: What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements?

When positioned elements overlap, the z-index property can be used to control the vertical stacking order. For example, when elements are stacked on top of each other, we can use z-index to control which one appears on top. The elements with higher z-index values are placed above those with lower values.

For example, if we stack three divs to overlap each other, giving each one different z-index values:

1<div class="container">
2  <div></div>
3  <div></div>
4  <div></div>
5</div>
 1.container {
 2  position: relative;
 3  width: 300px;
 4  height: 300px;
 5  border: .25rem solid black;
 6}
 7
 8.container > div:nth-child(1) {
 9  position: absolute;
10  z-index: 1;
11  background: hotpink;
12  top: 20px;
13  left: 20px;
14  width: 200px;
15  height: 200px;
16  border: .25rem solid black;
17}
18
19.container > div:nth-child(2) {
20  position: absolute;
21  z-index: 3;
22  background: lightgreen;
23  top: 40px;
24  left: 40px;
25  width: 200px;
26  height: 200px;
27  border: .25rem solid black;
28}
29
30.container > div:nth-child(3) {
31  position: absolute;
32  z-index: 2;
33  background: orange;
34  top: 60px;
35  left: 60px;
36  width: 200px;
37  height: 200px;
38  border: .25rem solid black;
39}

It will look like this:

z-index example where three boxes are stacked overlap inside a container. The lightgreen box appears on top, orange one is below, and hotpink one at the bottom.

Build a Cat Painting

We’ll go over this fun workshop that lets us practice what we’ve learned so far!

Build a House Painting

This exercise goes over some HTML and CSS positioning concepts that we’ve learned in this lesson!

CSS Positioning Review

In this unit, we’ve explored: