curriculum/challenges/english/blocks/workshop-cat-painting/646c5e727e56e743c9aed4a1.md
CSS positioning lets you set how you want an element to be positioned in the browser. It has a position property you can set to static, absolute, relative, sticky or fixed.
Once you set the position property of the element, you can move the element around by setting a pixel or a percentage value for one or more of the top, right, left, or bottom properties.
static is the default positioning for all elements. If you assign it to an element, you won't be able to move it around with top, right, left, or bottom.
Give .cat-head a position property of static, then set the top and left properties to 100px each.
Your .cat-head selector should have a position property set to static. Make sure you add a semicolon.
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.position, 'static')
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;
}
--fcc-editable-region--
.cat-head {
background: linear-gradient(#5e5e5e 85%, #45454f 100%);
width: 205px;
height: 180px;
border: 1px solid #000;
border-radius: 46%;
}
--fcc-editable-region--