78 lines
4.1 KiB
Markdown
78 lines
4.1 KiB
Markdown
---
|
||
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>
|
||
```
|