curriculum/challenges/english/blocks/workshop-cat-painting/6476f5c17f99146071ee884c.md
You could see that nothing happens. The .cat-head element did not move despite setting a top and left of 100px each. But that's not the case with relative positioning.
When you use the relative value, the element is still positioned according to the normal flow of the document, but the top, left, bottom, and right values become active.
Instead of static, give your .cat-head a position of relative, and leave both top and left properties as they are.
Your .cat-head selector should have a position property set to relative. Make sure you add a semicolon.
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position, 'relative');
Your .cat-head selector should have a top property set to 100px. Make sure you add a semicolon.
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.top, '100px');
Your .cat-head selector should have a left property set to 100px. Make sure you add a semicolon.
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.left, '100px');
<!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>
* {
box-sizing: border-box;
}
body {
background-color: #c9d2fc;
}
.cat-head {
--fcc-editable-region--
position: static;
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%;
}