CSSLesson 9 of 10Jump to practice

Positioning

Move elements out of the normal flow with relative, absolute, fixed and sticky positioning.

Normally, elements flow down the page one after another. The position property lets you take an element out of that flow and place it somewhere specific.

Value Positioned against Keeps its space?
static Nothing. This is the default Yes
relative Where it would normally be Yes
absolute The nearest positioned ancestor No
fixed The browser window No
sticky Normal, until you scroll past it, then it sticks Yes

Once an element is positioned, use top, right, bottom and left to move it.

relative and absolute: the badge pattern

The most common use: put position: relative on a card, then position: absolute on something inside it. The inner element is placed against the card’s corners.

A badge on a card
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  .card {
    position: relative;
    width: 240px;
    padding: 16px;
    background: #eef3f2;
    border-radius: 8px;
    font-family: sans-serif;
  }
  .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: crimson;
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
  }
</style>
</head>
<body>
<br>
<div class="card">
  <span class="badge">New</span>
  <h3>Python course</h3>
  <p>Starts next month.</p>
</div>
</body>
</html>
Result

Remove position: relative from .card and run it again. The badge jumps to the corner of the whole page instead.

sticky

A sticky element scrolls normally until it reaches its top value, then it stays there. Scroll inside the box below:

A sticky heading
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  .box { height: 200px; overflow: auto; border: 1px solid #ccc; font-family: sans-serif; }
  h3 {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 8px;
    background: #f4b63f;
  }
  p { padding: 0 8px; }
</style>
</head>
<body>
<div class="box">
  <h3>A</h3>
  <p>Apple</p><p>Apricot</p><p>Avocado</p>
  <h3>B</h3>
  <p>Banana</p><p>Blackberry</p><p>Blueberry</p>
  <h3>C</h3>
  <p>Cherry</p><p>Coconut</p><p>Custard apple</p>
</div>
</body>
</html>
Result

fixed

A fixed element stays in the same place in the window, no matter how far you scroll. Chat buttons and “back to top” links use it. Remember to leave room so it doesn’t cover important content on small screens.

z-index

When positioned elements overlap, z-index decides which is on top. Higher numbers are in front.

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Make the card the reference point for its absolutely positioned badge.

    .card {
  position: ;
}
.card .badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

  2. Exercise 2

    Keep the chat button in the same spot on screen, even when the page scrolls.

    .chat-button {
  position: ;
  bottom: 16px;
  right: 16px;
}

  3. Exercise 3

    Keep the table header stuck to the top while its section scrolls past.

    thead {
  position: ;
  top: 0;
}

Quiz: 3 questions

1. An element has position: absolute. What is it positioned against?
2. Which value moves an element but keeps its original space in the layout?
3. Two overlapping elements have z-index: 1 and z-index: 5. Which is in front?

Finish the practice to complete this lesson.