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:
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.
Go to Step 3
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%.
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
Go to Step 9
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
Go to Step 10
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
Go to Step 12
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.
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
Continue
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!
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.