---
id: 60b69a66b6ddb80858c51580
title: Paso 10
challengeType: 0
dashedName: step-10
---

# --description--

La propiedad `z-index` se usa para crear "capas" para sus elementos HTML. Si está familiarizado con las herramientas de edición de imágenes, es posible que haya trabajado con capas antes. Este es un concepto similar.

Los elementos con un valor de `z-index` más alto aparecerán superpuestos a los elementos con un valor de `z-index` más bajo. Esto se puede combinar con el posicionamiento de la lección anterior para crear efectos únicos.

Dado que el elemento `back-wall` deberá aparecer "detrás" de los otros elementos que creará, asigne al elemento `back-wall` un `z-index` de `-1`.

# --hints--

El selector `#back-wall` debe tener la propiedad `z-index` establecida en `-1`.

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

# --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%;
  position: absolute;
  top: 0;
  left: 0;
  --fcc-editable-region--

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