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

# --description--

Normalmente, HTML se representa de arriba hacia abajo. Los elementos en la parte superior del código se colocan en la parte superior de la página. Sin embargo, muchas veces es posible que desee mover los elementos a diferentes posiciones. Puede hacerlo con la propiedad `position`.

Establezca la propiedad `position` para el elemento `#back-wall` en `absolute`. Una posición `absolute` elimina el elemento de ese flujo de documento descendente y le permite ajustarlo en relación con su contenedor.

Cuando un elemento se coloca manualmente, puede cambiar su diseño con `top`, `left`, `right` y `bottom`. Establezca el elemento `#back-wall` para que tenga un valor `top` de `0` y un valor `left` de `0`.


# --hints--

El selector `#back-wall` debe tener la propiedad `position` establecida en `absolute`.

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

El selector `#back-wall` debe tener la propiedad `top` establecida en `0`.

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

El selector `#back-wall` debe tener la propiedad `left` establecida en `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--
}
```
