Current Goal: Making Websites

CSS Positioning

What it is

The complicated CSS rules for manually positioning elements.

Why it matters

With what we know so far, we can lay out a static page that is totally flat like a newspaper. In order to make a website with fancy widgets like a header that stays at the top or dropdown menus, we need to learn positioning.

What you'll learn

The CSS position values: static, relative, absolute (and relatively absolute), and fixed.

Along the way, you’ll also learn about z-index and how to use CSS positioning to make a dropdown menu

How to learn it

Work through the Interneting is Hard Advanced Positioning lesson. Let's skip the previous lesson on flexbox for the time being. Flexbox is a popular new layout tool added to CSS in its newest version, CSS3, but its better to cover the core concepts first. Plus, we've learned a lot of abstract concepts without applying them.

You should be able to work through the lesson just fine without it. Where you see flebox mentioned, just gloss over it for now.

Once you’ve learned styling, selectors, floats, display and position, you'll grasp all of the fundamentals of CSS. We’ll use this to lay out a real webpage to cap off part one. We’ll return to flexbox and a bunch more concrete examples so that you can understand the point of all of this in the next section.

If you worked through the guide and CSS positioning is still confusing to you, don’t worry, it’ll become clearer as we apply these rules to make real layouts. If you’d like some follow-up reading, these articles also cover CSS positioning:

Comprehension

  • What is static positioning?
  • What are the four types of CSS positioning?
  • Why should you generally stick to static positioning?
  • What is relative positioning? When is it useful?
  • How do you position a position: relative element?
  • What happens to the layout of the surrounding elements when a relatively positioned element is offset to the right?
  • What happens if you give a relatively positioned element a rule of top: -30px?
  • How is absolute positioning different than relative positioning?
  • What CSS positioning value allows you manually position an item with respect to the browser window?
  • Which CSS positioning values remove the element from the normal flow of the page?
  • What happens to an absolutely positioned item when it is placed inside a position: relative container?
  • How is fixed positioning different than absolute positioning?
  • What is one of the primary use cases for relative positioning?
  • Why use a <ul> for your navigation items instead of just divs?
  • Why use child selectors instead of descendant selectors?
  • What is the :last-of-type CSS selector? What is a common use case?
  • What positioning value can you use to remove the dropdown from the list and position it exactly where you want?
  • What is the z-index property?
  • What other property do elements have to have to obey z-index rules?
  • What CSS property makes an element completely disappear?
  • How can we make a dropdown menu expand on hover?

Tasks

Imagine a spherical cow. Wait, no, make that a rectangular donkey.

In this example, can you use position values to pin the tail on the donkey?

Using positioning values, hang the tail off of the left end of the donkey. Fix the grass to the bottom of the page like a fixed footer. Peek at the solution pen to see what you are going for, but don’t look at the code until you’ve tried it yourself.

Here’s a solution. Notice how the "donkey" is still part of the regular flow of the page?

On the other hand, the grass below the donkey is fixed and will run over the donkey if you shrink down the size of the window.

You could have done this with either relative positioning or relatively absolute positioning. In this case, using relatively absolute positioning makes more sense to me because you don’t have to care about how tall the text is, you can position it directly with respect to the ‘donkey’ container div.

What's Next?

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.

Current Goal: Making WebsitesNext Lesson: Developer Tools