3.2 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d781e367417b2b2512acb | З'єднайте елемент з батьківським елементом за допомогою абсолютної розстановки | 0 | https://scrimba.com/c/cyLJ7c3 | 301060 | lock-an-element-to-its-parent-with-absolute-positioning |
--description--
Наступним варіантом для властивості CSS position є absolute, який замикає елемент на місці відносно його батьківського елемента. На відміну від положення relative, він видаляє елемент зі звичайного потоку документа, тож об'єкти навколо його ігнорують. Властивості зміщення CSS (вгору або вниз, ліворуч або праворуч) використовуються для налаштування розташування.
Один нюанс з абсолютною розстановкою полягає в тому, що він буде приєднаний до найближчого positioned родича. Якщо ви забудете додати правило розстановки до батьківського елемента (зазвичай це відбувається під час використання position: relative;), браузер продовжить шукати ланцюжок і за замовчуванням перемикатися на теґ body.
--instructions--
Приєднайте елемент #searchbar до правого верхнього кута його батьківського елемента section, зазначивши його position як absolute. Надайте теґам top і right значення по 50 пікселів.
--hints--
Елемент #searchbar має містити position, встановлену на absolute.
assert($('#searchbar').css('position') == 'absolute');
Ваш код має використовувати зміщення CSS top зі значенням 50 пікселів на елементі #searchbar.
assert($('#searchbar').css('top') == '50px');
Ваш код має використовувати зміщення CSS right зі значенням 50 пікселів на елементі #searchbar.
assert($('#searchbar').css('right') == '50px');
--seed--
--seed-contents--
<style>
#searchbar {
}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>
--solutions--
<style>
#searchbar {
position: absolute;
top: 50px;
right: 50px;
}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>