Position absolute

position: absolute pulls an element out of the flow, just like we saw with position: fixed.

However, instead of being positioned relative to the viewport. If you do not use any of the inset values, it will stay where it was in the normal flow, but other elements no longer “see” it, and they will slide under it.

Unlike position: fixed, rather than being positioned relative to the viewport, it is positioned relative to it’s nearest defined containing block. By default, this is the page itself.

See the Pen position absolute and relative by Kevin (@kevinpowell) on CodePen.

Containing blocks

Containing blocks come into play when we start using positioning. The containing block is what the inset properties are relative to.

When we use position: fixed, the viewport becomes the containing block.

When we use position: absolute, the containing block for that element is the nearest ancestor which has a position other than static. If there is no ancestor that has a position other than static, then it becomes the <html> element.

The main reason I use position: relative is to create a containing block for an absolutely positioned element.

We haven’t worked on our project files for a little bit now, but we’ve learned a lot, so I think we’re ready to add a new section to the homepage!

Tip: While it looks like a specific height could be beneficial here, can you think of a way to avoid using one?

The design

We can add this directly below the already existing 3 column section. A 3 column
grid with 2 rows. Each cell has a card in it, with the title, short description,
and a tag for a course.

The content

The text content

Card 1

The Power of Central Control Strategy Control the center, control game.

Card 2

Fork, Pin, and Skewer Tactics Learn three essential tactical patterns.

Card 3

King and Pawn Endgames Endgames Master the most fundamental endgame.

Card 4

The Italian Opening Opening Theory Understand the value of exchanges.

Card 5

When to Trade Pieces Strategy Understand the value of exchanges.

Card 6

Calculating Two Moves Ahead Calculation Improve your visualization and accuracy.

The images

The HTML for the new section of content

<h2>Some of what awaits inside</h2>
        <div class="three-columns">
          <div class="course">
            <h3 class="course-title">The Power of Central Control</h3>
            <span class="course-tag">Strategy</span>
            <!-- <img src="images/central-control.jpg" alt="A pawn in the center of the board, with all the pieces around it fallen over."> -->
            <p class="course-description">Control the center, control game.</p>
          </div>
          <div class="course">
            <h3 class="course-title">Fork, Pin, and Skewer</h3>
            <span class="course-tag">Tactics</span>
            <!-- <img src="images/fork-pin-skewer.jpg" alt="Dramatic shot of a chess board, with the foreground peices out of focus, with a white queen in front of a black king"> -->

            <p class="course-description">Learn three essential tactical patterns.</p>
          </div>
          <div class="course">
            <h3 class="course-title">King and Pawn Endgames</h3>
            <span class="course-tag">Endgames</span>
            <!-- <img src="images/king-pawn-endgame.jpg" alt="A wooden chessboard with only a few pieces left on it."> -->
            <p class="course-description">Master the most fundamental endgame.</p>
          </div>
          <div class="course">
            <h3 class="course-title">The Italian Opening</h3>
            <span class="course-tag">Opening Theory</span>
            <!-- <img src="images/italian-opening.jpg" alt="A dramatic shot of a black and white chess board showing an advanced position after starting with the Italian Opening"> -->
            <p class="course-description">Understand the value of exchanges.</p>
          </div>
          <div class="course">
            <h3 class="course-title">When to Trade Pieces</h3>
            <span class="course-tag">Strategy</span>
            <!-- <img src="images/trading-pieces.jpg" alt="A person knocking over a knight with their bishop"> -->
            <p class="course-description">Understand the value of exchanges.</p>
          </div>
          <div class="course">
            <h3 class="course-title">Calculating Two Moves Ahead</h3>
            <span class="course-tag">Calculation</span>
            <!-- <img src="images/calculating.jpg" alt="A person deep in thought, contemplating their next move"> -->
            <p class="course-description">Improve your visualization and accuracy.</p>
          </div>
        </div>

The HTML structure for each course card

  <div class="course">
    <h3 class="course-title"></h3>
    <span class="course-tag"></span>
    <img class="course-image" src="" alt="">
    <p class="course-description"></div>
  </div>

Starting code

If you fell behind or skipped the earlier lessons, you can use this starting code, or the 08-position-absolute folder from this GitHub repo.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn Chess the right way</title>
<link href="styles/style.css" rel="stylesheet">
</head>

<body>

<header class="page-header">
<div class="wrapper">
  <div class="page-header-layout">
    <img src="images/crown.svg" alt="Frontend Masters Chess Acadamy">
    <nav class="primary-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="instructor.html">Instructor</a></li>
        <li><a href="#">Start Learning</a></li>
      </ul>
    </nav>
  </div>
</div>
</header>

<main>

<section class="hero">
  <div class="wrapper">
    <div class="hero-content">
      <h1><span>Books hard to follow? YouTube letting you down?</span> Learn Chess the right way.</h1>
      <p class="lede">Chess shouldn't feel like memorizing endless opening variations or sifting through amateur
        videos
        with confusing
        explanations. Our structured approach breaks down complex strategies into clear, progressive steps with
        expert
        instruction and personalized feedback. <strong>Stop wasting time with scattered resources and start
          mastering
          real
          chess
          today</strong>. </p>
      <button class="button">Start learning today!</button>
    </div>
</section>

<section>
  <div class="wrapper">
    <h2>Start your journey to grandmaster today</h2>

    <div class="three-columns">
      <div>
        <h3>Learn the Right Way, in the Right Order</h3>
        <p>Our curriculum follows proven chess pedagogy, building from fundamentals to advanced strategy. Each
          lesson
          connects
          naturally to the next, so you always know what to study. </p>
      </div>
      <div>
        <h3>Train with Expert Instructors</h3>
        <p>Learn from titled players who break down complex concepts into clear insights. Understand not just what
          to
          do,
          but
          why it works.</p>
      </div>
      <div>
        <h3>Track Your Progress with Precision</h3>
        <p>Detailed analytics identify your strengths and weaknesses, then adapt your training to focus on what
          matters
          most
          for your improvement.</p>
      </div>
    </div>
  </div>
</section>
</main>

<footer class="page-footer">
<div class="wrapper">
  <div class="page-footer-content">
    <h2>Ready to Improve Your Chess?</h2>
    <p>Join thousands of students who are already leveling up their game. Start your first lesson today—it's free to
      get
      started!. <a href="instructor.html">Start learning today!</a></p>
  </div>
</div>
</footer>
</body>

</html>

CSS

@font-face {
font-family: "Overlock";
src: local("Overlock"), url("../fonts/Overlock-Regular.ttf");
}

@font-face {
font-family: "Overlock";
src: local("Overlock Bold"), url("../fonts/Overlock-Bold.ttf");
font-weight: bold;
}

:root {
--clr-accent-300: hsl(39 94% 57%);
--clr-accent-400: hsl(39 100% 41%);

--clr-neutral-100: hsl(0 0% 100%);
--clr-neutral-800: hsl(0 0% 20%);
--clr-neutral-900: hsl(0 0% 0%);

--ff-base: system-ui, sans-serif;
--ff-accent: Overlock, serif;

--fs-400: 1rem;
--fs-500: 1.25rem;
--fs-600: 1.325rem;
--fs-700: 2rem;
--fs-800: 2.5rem;

@media (width > 720px) {
--fs-400: 1.125rem;
--fs-500: 1.3125rem;
--fs-600: 1.5rem;
--fs-700: 2.5rem;
--fs-800: 3rem;
}
}

* {
box-sizing: border-box;
}

body {
color: var(--clr-neutral-800);
font-size: var(--fs-400);
font-family: var(--ff-base);
line-height: 1.6;
margin: 0;
}

h1,
h2 {
color: var(--clr-accent-400);
font-family: var(--ff-accent);
line-height: 1.1;
}

h1 {
font-size: var(--fs-800);
}

h1 span {
display: block;
font-size: 0.75em;
font-weight: lighter;
color: var(--clr-neutral-800);
}

h2 {
font-size: var(--fs-700);
}

h3 {
font-size: var(--fs-600);
}

a {
color: var(--clr-accent-400);
}

a:hover,
a:focus-visible {
color: inherit;
}

.button {
font: inherit;
font-weight: 700;
text-transform: uppercase;
background: var(--clr-accent-300);
border: 0;
padding: 0.75em 1.5em;
}

.button:hover,
.button:focus-visible {
background: var(--clr-neutral-800);
color: var(--clr-accent-300);
}

.lede {
font-size: var(--fs-500);
}

.wrapper {
max-inline-size: 900px;
margin-inline: auto;
padding-inline: 1rem;
}

.three-columns {
display: grid;
gap: 1rem;

@media (width > 720px) {
grid-template-columns: repeat(3, 1fr);
}
}

.page-header {
background: var(--clr-neutral-900);
padding: 1rem;
}

.page-header-layout {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: space-between;
}

.primary-nav ul {
list-style: none;
margin: 0;
padding: 0;

display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.primary-nav a {
text-decoration: none;
color: var(--clr-neutral-100);
font-weight: 700;

&:hover,
&:focus-visible {
color: var(--clr-accent-300);
}
}

.hero {
padding-block: 100px;
background-image: url(../images/chess-bg.jpg);
background-size: cover;
}

.hero-content {
text-align: center;
background: hsl(0 0% 100% / 0.8);
padding: 40px;
}

.hero-content > :first-child {
margin-block-start: 0;
}

.hero-content > :last-child {
margin-block-end: 0;
}

.page-footer {
text-align: center;
background-image: linear-gradient(#444, #000);
color: var(--clr-neutral-100);
padding: 50px;
}