427444c757
* chore(learn): audit files for crowdin Audits the challenge text in the Responsive Web Design superblock to account for words/phrases that should not be translated because they refer to code. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: remove quotes from code Removes instances of quoted code blocks, or code blocked quotes. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: additional uncaught quote-codes Thanks Oliver :) Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: so many quotes Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: missing punctuation Noted in a Crowdin comment. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> * fix: remove more quotes Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
91 lines
2.3 KiB
Markdown
91 lines
2.3 KiB
Markdown
---
|
|
id: 587d781e367417b2b2512acb
|
|
title: Lock an Element to its Parent with Absolute Positioning
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
|
forumTopicId: 301060
|
|
dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
|
---
|
|
|
|
# --description--
|
|
|
|
The next option for the CSS `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--
|
|
|
|
Lock the `#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.
|
|
|
|
# --hints--
|
|
|
|
The `#searchbar` element should have a `position` set to `absolute`.
|
|
|
|
```js
|
|
assert($('#searchbar').css('position') == 'absolute');
|
|
```
|
|
|
|
Your code should use the `top` CSS offset of 50 pixels on the `#searchbar` element.
|
|
|
|
```js
|
|
assert($('#searchbar').css('top') == '50px');
|
|
```
|
|
|
|
Your code should use the `right` CSS offset of 50 pixels on the `#searchbar` element.
|
|
|
|
```js
|
|
assert($('#searchbar').css('right') == '50px');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<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--
|
|
|
|
```html
|
|
<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>
|
|
```
|