ContextQMD
Back to Freecodecamp

Step 11

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

latest1.9 KB
Original Source

--description--

The next position property is absolute. When you use the absolute value for your position property, the element is taken out of the normal flow of the document, and then its position is determined by the top, right, bottom, and left properties.

Set the position property of your .cat-head element to absolute, then set top and left properties to any positive pixel value.

<!-- **Note**: You can experiment with `top`, `left`, `bottom`, and `right` properties here, but the test would only pass for `top` of `300px`, and left of `400px`. -->

--hints--

Your .cat-head selector should have a position property set to absolute. Make sure you add a semicolon.

js
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position === 'absolute')

Your .cat-head selector should have a top property set to any number in px. Make sure you add a semicolon.

js
// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top === '300px')
assert.match(code, /top:\s*\d{1,4}px;/)

Your .cat-head selector should have a left property set to any number in px. Make sure you add a semicolon.

js
// assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left === '400px')
assert.match(code, /left:\s*\d{1,4}px;/)

--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>
    </main>
</body>
</html>
css
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

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