---
id: 6476fb7cbaafa36d65e9cf35
title: Step 12
challengeType: 0
dashedName: step-12
---

# --description--

`fixed` is a `position` property value that lets you make an element fixed to the page no matter where the user scrolls to on the page.

You'll have to do some more markups to see how `fixed` positioning works. In your HTML, create a `div` element with the class `box`.

# --hints--

You should have a `div` element.

```js
assert(document.querySelectorAll('div').length === 2);
```

Your `div` element should have the class `box`.

```js
assert(document.querySelectorAll('div')[1]?.getAttribute('class') === 'box');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head"></div>
      --fcc-editable-region--

      --fcc-editable-region--
    </main>
</body>
</html>
```

```css
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

.cat-head {
  position: absolute;
  top: 300px;
  left: 400px;
  background: linear-gradient(#5e5e5e 85%, #45454f 100%);
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;
}
```
