---
id: 60b69a66b6ddb80858c5157f
title: Step 9
challengeType: 0
dashedName: step-9
---

# --description--

Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the `position` property.

Set the `position` property for the `#back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container.

When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `#back-wall` element to have a `top` value of `0`, and a `left` value of `0`.


# --hints--

Your `#back-wall` selector should have the `position` property set to `absolute`.

```js
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute');
```

Your `#back-wall` selector should have the `top` property set to `0`.

```js
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px');
```

Your `#back-wall` selector should have the `left` property set to `0`.

```js
assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  </head>
  <body>
    <div id="back-wall"></div>
  </body>
</html>
```

```css
body {
  background-color: rgb(184, 132, 46);
}

#back-wall {
  background-color: #8B4513;
  width: 100%;
  height: 60%;
  --fcc-editable-region--

  --fcc-editable-region--
}
```
