---
id: 60b69a66b6ddb80858c51580
title: الخطوة 10
challengeType: 0
dashedName: step-10
---

# --description--

يتم استخدام خاصية `z-index` لإنشاء "طبقات" (layers) لعناصر HTML الخاصة بك. إذا كنت على دراية بأدوات تحرير الصور، ربما كنت قد عملت مع الطبقات من قبل. هذا مفهوم مشابه.

ستبدو العناصر التي تحتوي على قيمة `z-index` أعلى فوق العناصر التي تحتوي على قيمة `z-index` اقل. يمكن الجمع بين ذلك وبين تحديد المكان (positioning) في الدرس السابق، لإنشاء تأثيرات فريدة.

بما أن عنصر `back-wall` سيحتاج إلى أن يظهر "خلف" العناصر الأخرى التي ستقوم بإنشائها، قم إعطاء عنصر `back-wall` الـ `z-index` بقيمة `-1`.

# --hints--

يجب أن يحتوي منتقي `#back-wall` الخاص بك على خاصية `z-index` بقيمة `-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--
}
```
