---
id: 60b69a66b6ddb80858c5157f
title: الخطوة 9
challengeType: 0
dashedName: step-9
---

# --description--

عادةً، يتم تقديم HTML بترتيب من أعلى إلى أسفل. العناصر في الجزء العلوي من التعليمات البرمجية موضوعة في الجزء العلوي من الصفحة. ومع ذلك، قد ترغب مرات عدّة في نقل العناصر إلى مواقف مختلفة. يمكنك الفعل ذلك باستخدام سمة `position`.

عيّن خاصية `position` لعنصر `#back-wall` بقيمة `absolute`. يخرج موضع `absolute` العنصر من ذلك التدفق المستند من أعلى إلى أسفل ويسمح لك بتعديله بالنسبة (relative) إلى الحاوية.

عندما يتم وضع عنصر يدوياً، يمكنك نقل تخطيطه باستخدام `top`, و`left`، و`right`، و`bottom`. يجب أن يحتوي `#back-wall` على `top` بقيمة `0`، و `left` بقيمة `0`.


# --hints--

يجب يحتوي منتقيك `#back-wall` على `position` محدد على `absolute`.

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

يجب أن يحتوي منتقيك `#back-wall` على خاصية `top` بقيمة `0`.

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

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