--- id: 587d781e367417b2b2512acc title: Lock an Element to the Browser Window with Fixed Positioning challengeType: 0 videoUrl: '' localeTitle: 使用固定定位将元素锁定到浏览器窗口 --- ## Description
CSS提供的下一个布局方案是fixed位置,这是一种绝对定位,可以相对于浏览器窗口锁定元素。与绝对定位类似,它与CSS偏移属性一起使用,并且还从文档的正常流中移除元素。其他项目不再“实现”它所处的位置,这可能需要在其他地方进行一些布局调整。 fixed位置和absolute位置之间的一个关键区别是,当用户滚动时,具有固定位置的元素将不会移动。
## Instructions
在代码导航栏标有的一个id navbar 。将其position更改为fixed ,并将其偏离top 0像素和left 0像素。注意到(没有)对h1位置的影响,它没有被按下以容纳导航栏并且需要单独调整。
## Tests
```yml tests: - text: '#navbar元素的position应设置为fixed 。' testString: 'assert($("#navbar").css("position") == "fixed", "The #navbar element should have a position set to fixed.");' - text: '您的代码应该使用#navbar元素上0像素的top CSS偏移量。' testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the top CSS offset of 0 pixels on the #navbar element.");' - text: '您的代码应使用#navbar元素上0像素的left CSS偏移量。' 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
```js // solution required ```