--- id: 587d781e367417b2b2512acc title: Lock an Element to the Browser Window with Fixed Positioning challengeType: 0 videoUrl: 'https://scrimba.com/c/c2MDNUR' --- ## Description
The next layout scheme that CSS offers is the fixed position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere. One key difference between the fixed and absolute positions is that an element with a fixed position won't move when the user scrolls.
## Instructions
The navigation bar in the code is labeled with an id of navbar. Change its position to fixed, and offset it 0 pixels from the top and 0 pixels from the left. Notice the (lack of) impact to the h1 position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately.
## Tests
```yml tests: - text: The #navbar element should have a position set to fixed. testString: assert($('#navbar').css('position') == 'fixed', 'The #navbar element should have a position set to fixed.'); - text: Your code should use the top CSS offset of 0 pixels on the #navbar element. testString: assert($('#navbar').css('top') == '0px', 'Your code should use the top CSS offset of 0 pixels on the #navbar element.'); - text: Your code should use the left CSS offset of 0 pixels on the #navbar element. testString: assert($('#navbar').css('left') == '0px', 'Your code should use the left CSS offset of 0 pixels on the #navbar element.'); ```
## Challenge Seed
```html

Welcome!

I shift up when the #navbar is fixed to the browser window.

```
## Solution
```html

Welcome!

I shift up when the #navbar is fixed to the browser window.

```