Learn CSS Positioning by Building an Ice Cream Sundae

Master the fundamentals of CSS positioning with this interactive tutorial

Get Started

Skip to Practice Section

CSS Sundae

Give Feedback
Show HTML

<div class="fullSundae"> <div class="cherry"></div> <div class="whippedCream"></div> <div class="iceCreamScoop"></div> <div class="iceCreamScoop"></div> <div class="glass"> <div class="cherry topCherry"></div> <div class="cherry bottomCherry"></div> <div class="iceCreamScoop topScoop"></div> <div class="iceCreamScoop middleScoop"></div> <div class="iceCreamScoop"></div> </div> </div>

<div class="livingRoom"> <div class="light light1"></div> <div class="light light2"></div> <div class="entertainmentCenter"> <div class="tv"></div> <div class="stand"> <div class="section"> <div class="books"></div> </div> <div class="section"></div> <div class="section"> <div class="books"></div> </div> </div> </div> </div>

Total Height: 500px

Total Height: 300px

Build A CSS Sundae

This tutorial will help you learn the major principles of CSS positioning so you can create flowing websites.

Why do I need this?

Learning CSS positioning traditionally requires hours of trial and error, and confusion when your entire design changes by just toggling the position attribute. This 15 min tutorial will hopefully prevent that.

What is the focus?

You will build an ice cream sundae using these position properties:

  • Static
  • Relative
  • Absolute
  • Fixed

What do I need to know first?

You only need to know HTML basics!

Go to Step 1

The Ground Rules (1/15)

Let's establish some basic definitions

An ice cream sundae consists of...

  • Glass
  • Ice cream scoops
  • Cherries
  • Whipped Cream

The final HTML will look like...

<div class="fullSundae"> <div class="cherry"></div> <div class="whippedCream"></div> <div class="iceCreamScoop"></div> <div class="iceCreamScoop"></div> <div class="glass"> <div class="cherry topCherry"></div> <div class="cherry bottomCherry"></div> <div class="iceCreamScoop topScoop"></div> <div class="iceCreamScoop middleScoop"></div> <div class="iceCreamScoop"></div> </div> </div>

Some Key Facts (2/15)

This image sets the direction for how we will build the sundae

Ice cream scoops v. glass

The number of ice cream scoops is limited by the glass height. We cannot keep stacking ice cream scoops forever. Eventually, the whole beautiful setup would topple over.

Cherries have separate rules

You can put the cherries wherever you darn please. Cherries do not obey the flow and stacking of the scoops. They are smaller, and can fit in nooks and crannies where you cannot fit an ice cream scoop. And, more cherries will not upset the order of the scoops.

Whipped cream on top

The whipped cream sits on top, no matter how many scoops there are. Have you ever seen an ice cream sundae with the whipped cream in the middle, and none on top? Neither have I.

Position: Static (3/15)

This is the default position attribute

The Entire Sundae

As shown in the previous image, our whole sundae can handle 5 scoops of ice cream. Let's assume that the sundae has a height of 500px. There is no need to state the position property explicitly, since "static" is default.

Give your fullSundae div a height of 500px, no need to specify position.

.fullSundae{ }

Back
Go to Step 4

Did you set height to 500px?

Position: Static (4/15)

This is the default position attribute

The Top Scoops

We are going to do this a little out of order. Let's add the top scoops since it is straightforward. Each scoop should have a height of 100px.

Give each iceCreamScoop at the top level a height of 100px.

.fullSundae > .iceCreamScoop{ }

Back
Go to Step 5

Did you set height to 100px?

Position: Relative (5/15)

Let's prepare the glass, a container div

The Glass

There are two components to the glass div: the glass itself, and the scoops inside. Each must have position relative. Let's do the glass first.

Since the glass contains three scoops, it is 60% of the height of the entire div. It also must have position relative to accomodate the cherries, which we will cover in the position:absolute section.

Give your glass div a height of 60% and position relative.

.fullSundae{ }

Back
Go to Step 6

Did you set position relative?

Position: Relative (6/15)

Let's add the ice cream scoops

The Scoops

There are three scoops within the glass. Since they fill the glass, they must each be 33.3% of the height, and position relative.

Relative is important so that we are able to adjust their position in relation to their parent container, the glass.

Give each scoop a height of 33.3% and position relative.

.fullSundae > .iceCreamScoop{ width: 80%; }

Back
Go to Step 7

Did you set height to 33.3%?

Position: Relative (7/15)

Practicing position relative

Moving The Scoops

The top two scoops of the glass are not perfectly aligned. The top scoop leans left, and the middle scoop leans right. Let's make sure the code reflects that using position relative. There is a 20% gap on the right of the top scoop, and a 20% gap on the left of the middle scoop.

Position relative can be used to shift a div by a percentage in relation to the parent. Use the 'left' and 'right' attributes to shift each scoop by 20%.

.fullSundae > .iceCreamScoop.topScoop{ } .fullSundae > .iceCreamScoop.middleScoop{ }

Back
Go to Step 8

Did you set move each scoop right or left by 20%?

Position: Relative (8/15)

Summary of position relative

Use relative when...

  • You need to set a container for position:absolute elements (the cherries which we will do later)
  • You want to shift elements in one direction within the container (ice cream scoops that sit unevenly)
Back

Position: Fixed (9/15)

Let's add the whipped cream on top

The Whipped Cream

Whipped cream is always on top of the sundae. If you have a massive pile of whipped cream on top, you will still be able to fit 5 scoops without overflowing or toppling.

Similarly, position fixed elements always stay in the same position on the user's screen, no matter how long the body is.

Show Size Options
Back

Position: Fixed (10/15)

Let's add the whipped cream on top

The Whipped Cream

We want the whipped cream to always stay on top, no matter the height of the sundae. So let's added position fixed and set top to 0.

Add position fixed and top 0.

.whippedCream{ }

Back
Go to Step 11

Did you set top to 0?

Position: Absolute (11/15)

Let's add some cherries!

The Cherries

Position absolute allows us to place items in specific places, without disrupting the flow of other elements. But there is one major caveat- these items do not "stack" like the glass and ice cream scoops do.

This makes cherries a perfect example, since they can be crammed into different gaps of the glass without upsetting the scoops.

Back

Did you set top to 0?

Position: Absolute (12/15)

Let's add some cherries!

The Cherries

Let's put one cherry on top. Again, this does not interfere with the flow of the scoops. Put it 50% from the left and top 0.

Add left of 50% and top 0 to the topmost cherry.

.fullSundae > cherry{ position:absolute; }

Back
Go to Step 13

Did you set left to 50%?

Position: Absolute (13/15)

Let's add some cherries!

The Cherries

Remember when we added position: relative to the glass way back when? Here is why: because when we place position absolute elements, they move relative to the nearest parent that is NOT position static.

So, if we want to add two cherries within the glass, the glass should have position relative. Again, the cherries will not upset the main flow of ice cream scoops.

Add one cherry 5px from the left, and 5px from the top. Add another cherry 15px from the bottom, and 2px from the left.

.glass .cherry.topCherry{ position:absolute; } .glass .cherry.bottomCherry{ position:absolute; }

Back
Summary

Re-read instructions!

Position: Absolute (14/15)

Summary of position absolute

Use absolute when...

  • You need to place elements precisely outside the normal flow of elements
  • You do not need your elements to stack
Back

Final Code (15/15)

Give Feedback

<div class="fullSundae"> <div class="cherry"></div> <div class="whippedCream"></div> <div class="iceCreamScoop"></div> <div class="iceCreamScoop"></div> <div class="glass"> <div class="cherry topCherry"></div> <div class="cherry bottomCherry"></div> <div class="iceCreamScoop topScoop"></div> <div class="iceCreamScoop middleScoop"></div> <div class="iceCreamScoop"></div> </div> </div> .fullSundae{ height:500px; position:static; } .fullSundae > .iceCreamScoop{ height: 100px; } .fullSundae > .cherry{ position:absolute; top:10px; left:50%; } .glass{ position:relative; height:60%; } .glass > .iceCreamScoop{ height:33%; position:relative; } .iceCreamScoop.topScoop{ right:20%; } .iceCreamScoop.middleScoop{ left:20%; } .cherry.topCherry{ position:absolute; left: 5px; top:5px; } .cherry.bottomCherry{ position:absolute; left: 5px; bottom:15px; }

Challenge Prep (1/8)

You need to put together a living room with CSS positioning

Survey The Scene

Check out the following living room scene, including lights, a TV, a stand, and books. What position property should each element have?

Show HTML

<div class="livingRoom"> <div class="light light1"></div> <div class="light light2"></div> <div class="entertainmentCenter"> <div class="tv"></div> <div class="stand"> <div class="section"> <div class="books"></div> </div> <div class="section"></div> <div class="section"> <div class="books"></div> </div> </div> </div> </div>

The Lights (2/8)

What position should the lights have?

The Flow of Elements

First question: Are the lights part of the main flow of elements? Do they stack? Take a look.

Light 1 is 20% from the left. Light 2 is 20% from the right.

.light .light1{ } .light .light2{ }

Test Solution
Continue

Does your answer contain a valid position value?

The Lights (3/8)

What position should the lights have?

Position:Absolute

The lights are not part of any flow. And, they must be placed individually. You do not stack the lights. So they must be position:absolute;

In fact, the entertainment center div as a whole is position:absolute as well. It must start from the bottom of the screen.

.entertainmentCtr{ position:absolute; width:60%; bottom:0; left:20%; text-align:center; }

Back

The Entertainment Center (4/8)

What position should the entertainment center have?

The Flow of Elements

Do the pieces of the entertainment center flow together? Does it make sense to stack them?

The TV has a width of 60%. The stand has a width of 100%.

.tv{ } .stand{ }

Test Solution
Back
Continue

Does your answer contain a valid position value?

The Entertainment Center (5/8)

What position should the pieces of the entertainment center have?

Position:Static

The TV div stacks on top of the stand div. There is no unusual arrangement.

Back

Books (6/8)

What position should the books have?

The Flow of Elements

Within the stand, there are three sections where we can store books. In the far left section, we want our books to start 3% from the left side of the section. In the far right section, we want our books to start 20% from the left side of the div.

Make the books within the left section 3% from the left side, and the books in the right section 20% from the left edge. Do NOT use the margin property!

.leftSection > .books{ } .rightSection > .books{ }

Test Solution
Back
Continue

Does your answer contain a valid position value?

The Books (7/8)

What position should the books have?

Position:Relative

Since we are not using the margin property, the books must have position:relative so we can move them with the "left" property. When we set "left" to 3%, that means they are moving by 3% of the width of their parent container.

Back

Final Code (8/8)

Give Feedback

.light1{ position:absolute; left:20%; } .light2{ position:absolute; right:20%; } .tv{ position:static; width:60%; } .stand{ position:static; width:100%; } .leftSection > .books{ position:relative; left:3%; } .rightSection > .books{ position:relative; left:20%; }