--- id: 587d781e367417b2b2512aca title: Move a Relatively Positioned Element with CSS Offsets challengeType: 0 videoUrl: '' localeTitle: 使用CSS偏移移动相对定位的元素 --- ## Description
topbottomleftright的CSS偏移告诉浏览器将项目相对于文档正常流程中的位置偏移多远。您将元素偏离给定的点,这会使元素远离引用的边(有效地,相反的方向)。正如您在上一次挑战中看到的那样,使用顶部偏移将h2向下移动。同样,使用左偏移会将项目向右移动。

说明

使用CSS偏移将h2移动15像素向右移动10像素。

测试

 tests: - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");' 

挑战种子

 <head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body> 

 // solution required 
## Instructions
使用CSS偏移将h2移动15像素向右移动10像素。
## Tests
```yml tests: - text: 您的代码应使用CSS偏移量来相对定位h2 10px。换句话说,将它从通常所在位置的bottom移开10px。 testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.");' - text: 您的代码应该使用CSS偏移来相对地将h2 15px定位到右侧。换句话说,将它从通常所在的位置left移动15px。 testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.");' ```
## Challenge Seed
```html

On Being Well-Positioned

Move me!

I still think the h2 is where it normally sits.

```
## Solution
```js // solution required ```