4.1 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d781e367417b2b2512ac9 | Змінити відносну позицію елемента | 0 | https://scrimba.com/c/czVmMtZ | 301044 | change-an-elements-relative-position |
--description--
CSS сприймає кожний елемент HTML як власний блок, який зазвичай називають CSS Box Model. Елементи-блоки автоматично переміщуються на новий рядок (такий як заголовок, параграф, сектор), тоді як вбудовані елементи можуть бути оточені іншими матеріалами (такими як зображення або інтервали). У такому разі шаблон елементів, що використовується за замовчуванням, називається normal flow документа, але CSS пропонує властивість position (розміщення), щоб змінити його.
Коли елементу задана властивість relative, що дозволяє вам визначити, як має рухатися CSS relative відносно свого поточного розміщення у стандартному блоці сторінки. Разом з CSS властивість offset (розміщення) може бути left або right, і top або bottom. Це вказує на кількість пікселів, відсотків або em, необхідних для переміщення елементу away у стандартну позицію. Ось приклад того, як пересунути параграф на 10 пікселів вгору:
p {
position: relative;
bottom: 10px;
}
Змінюючи позицію елементу на відносну, ви не прибираєте елемент зі стандартного блоку - інші об'єкти на сторінці розташовані так, ніби елемент не змінював свого положення за замовчуванням.
Примітка: Зміна розташування дозволяє вам краще оперувати візуальним шаблоном сторінки. Пам'ятайте, що незважаючи на положення елементів, нижча розмітка HTML повинна бути організована і мати сенс при читанні зверху знизу. Саме так користувачі і порушеннями зору (які покладаються на допоміжні пристрої, такі як зчитувачі екрану) отримують доступ до ваших матеріалів.
--instructions--
Змініть position для h2 на relative, та скористайтеся властивістю offset (розміщення) для CSS, задля переміщення на 15 пікселів від top, тобто стандартного блоку. Перевірте, чи не змінилося розташування інших елементів відносно h1 та p.
--hints--
Елемент h2 повинен мати властивість position в позиції relative.
assert($('h2').css('position') == 'relative');
Ваш код має використовувати зсув CSS, щоб змістити h2 на 15 пікселів від його стандартного розташування відносно top.
assert($('h2').css('top') == '15px');
--seed--
--seed-contents--
<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--
<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>