ContextQMD
Back to Freecodecamp

Step 12

curriculum/challenges/english/blocks/learn-intermediate-css-by-building-a-cat-painting/6476fb7cbaafa36d65e9cf35.md

latest1.1 KB
Original Source

--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%;
}