---
id: 60b69a66b6ddb80858c51580
title: Hatua ya 10
challengeType: 0
dashedName: step-10
---

# --description--

Kipengele cha `z-index` kinatumika kuunda "tabaka" (layers) kwa vipengele vyako vya HTML. Ikiwa unafahamu wa zana za kuhariri picha, huenda ulifanya kazi na tabaka hapo awali. Hii ni dhana inayofanana.

Vipengele vilivyo na thamani ya juu ya `z-index` vitaonekana kuwa vimewekwa juu ya vipengee vyenye thamani ya chini ya `z-index`. Hii inaweza kuunganishwa na nafasi katika somo lililopita ili kuunda athari za kipekee.

Kwa kuwa kipengele cha `back-wall` kitahitaji kuonekana "nyuma" ya vipengele vingine utakavyounda, kipe kipengele cha `back-wall` `z-index` ya `-1`.

# --hints--

Kichaguzi chako cha `#back-wall` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `-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--
}
```
