2.6 KiB
2.6 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d781e367417b2b2512acb | Lock an Element to its Parent with Absolute Positioning | 0 | https://scrimba.com/c/cyLJ7c3 |
Description
position
property is absolute
, which locks the element in place relative to its parent container. Unlike the relative
position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.
One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;
), the browser will keep looking up the chain and ultimately default to the body tag.
Instructions
#searchbar
element to the top-right of its section
parent by declaring its position
as absolute
. Give it top
and right
offsets of 50 pixels each.
Tests
tests:
- text: The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.
testString: assert($('#searchbar').css('position') == 'absolute', 'The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.');
- text: Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.
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: Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.
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