3.5 KiB
3.5 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d781e367417b2b2512acb | Lock an Element to its Parent with Absolute Positioning | 0 | Блокировка элемента для его родителя с абсолютным позиционированием |
Description
position
CSS является absolute
, которая блокирует элемент на месте относительно его родительского контейнера. В отличие от relative
положения, это удаляет элемент из нормального потока документа, поэтому окружающие объекты игнорируют его. Свойства смещения CSS (сверху или снизу и слева или справа) используются для настройки положения. Один нюанс с абсолютным позиционированием состоит в том, что он будет заблокирован относительно его ближайшего расположенного предка. Если вы забыли добавить правило позиции к родительскому элементу (это обычно делается с использованием position: relative;
), браузер будет продолжать искать цепочку и, в конечном счете, по умолчанию использовать тег body. Instructions
#searchbar
в верхнем правом углу родительского section
, объявив его position
absolute
. Дайте ему top
и right
смещения по 50 пикселей каждый. Tests
tests:
- text: 'Элемент <code>#searchbar</code> должен иметь <code>absolute</code> <code>position</code> .'
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
- text: 'Ваш код должен использовать <code>top</code> смещение CSS 50 пикселей в элементе <code>#searchbar</code> .'
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
- text: 'Ваш код должен использовать <code>right</code> смещение CSS 50 пикселей в элементе <code>#searchbar</code> .'
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
Challenge Seed
<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>
Solution
// solution required