---
id: 587d781e367417b2b2512ac9
title: Змінити відносну позицію елемента
challengeType: 0
videoUrl: 'https://scrimba.com/c/czVmMtZ'
forumTopicId: 301044
dashedName: change-an-elements-relative-position
---

# --description--

CSS сприймає кожний елемент HTML як власний блок, який зазвичай називають <dfn>CSS Box Model</dfn>. Елементи-блоки автоматично переміщуються на новий рядок (такий як заголовок, параграф, сектор), тоді як вбудовані елементи можуть бути оточені іншими матеріалами (такими як зображення або інтервали). У такому разі шаблон елементів, що використовується за замовчуванням, називається <dfn>normal flow</dfn> документа, але CSS пропонує властивість position (розміщення), щоб змінити його.

Коли елементу задана властивість `relative`, що дозволяє вам визначити, як має рухатися CSS *relative* відносно свого поточного розміщення у стандартному блоці сторінки. Разом з CSS властивість offset (розміщення) може бути `left` або `right`, і `top` або `bottom`. Це вказує на кількість пікселів, відсотків або em, необхідних для переміщення елементу *away* у стандартну позицію. Ось приклад того, як пересунути параграф на 10 пікселів вгору:

```css
p {
  position: relative;
  bottom: 10px;
}
```

Змінюючи позицію елементу на відносну, ви не прибираєте елемент зі стандартного блоку - інші об'єкти на сторінці розташовані так, ніби елемент не змінював свого положення за замовчуванням.

**Примітка:** Зміна розташування дозволяє вам краще оперувати візуальним шаблоном сторінки. Пам'ятайте, що незважаючи на положення елементів, нижча розмітка HTML повинна бути організована і мати сенс при читанні зверху знизу. Саме так користувачі і порушеннями зору (які покладаються на допоміжні пристрої, такі як зчитувачі екрану) отримують доступ до ваших матеріалів.

# --instructions--

Змініть `position` для `h2` на `relative`, та скористайтеся властивістю offset (розміщення) для CSS, задля переміщення на 15 пікселів від `top`, тобто стандартного блоку. Перевірте, чи не змінилося розташування інших елементів відносно h1 та p.

# --hints--

Елемент `h2` повинен мати властивість `position` в позиції `relative`.

```js
assert($('h2').css('position') == 'relative');
```

Ваш код має використовувати зсув CSS, щоб змістити `h2` на 15 пікселів від його стандартного розташування відносно `top`.

```js
assert($('h2').css('top') == '15px');
```

# --seed--

## --seed-contents--

```html
<style>
  h2 {


  }
</style>
<body>
  <h1>On Being Well-Positioned</h1>
  <h2>Move me!</h2>
  <p>I still think the h2 is where it normally sits.</p>
</body>
```

# --solutions--

```html
<style>
  h2 {
    position: relative;
    top: 15px;
  }
</style>
<body>
  <h1>On Being Well-Positioned</h1>
  <h2>Move me!</h2>
  <p>I still think the h2 is where it normally sits.</p>
</body>
```
