2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
id: 587d781e367417b2b2512aca
|
2020-12-16 07:37:30 +00:00
|
|
|
title: 使用 CSS 偏移移动相对定位的元素
|
2018-10-10 22:03:03 +00:00
|
|
|
challengeType: 0
|
2020-02-11 07:46:34 +00:00
|
|
|
videoUrl: 'https://scrimba.com/c/c9bQEA4'
|
|
|
|
forumTopicId: 301065
|
2021-01-13 02:31:00 +00:00
|
|
|
dashedName: move-a-relatively-positioned-element-with-css-offsets
|
2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --description--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
CSS 里面的 `top`、`bottom`、`left` 和 `right` 定义了元素在相应方位的偏移距离。元素将从当前位置向属性相反的方向偏移。就像你在上一个挑战看到的,`top` 属性使 `h2` 向下移动。`left` 属性使元素向右移动。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
<img src='https://i.imgur.com/eWWi3gZ.gif' alt=''>
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --instructions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
请通过 CSS 属性把 `h2` 向上移动 10 像素,向右移动 15 像素。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --hints--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
应使用 CSS 属性使 `h2` 相对当前位置向上移动 `10px`。也就是说,从 `h2` 当前位置远离 `bottom` `10px`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
assert($('h2').css('bottom') == '10px');
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
应使用 CSS 属性使 `h2` 相对当前位置向右移动 `15px`。也就是说,从 `h2` 当前位置远离 `left` `15px`。
|
2020-02-11 07:46:34 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
assert($('h2').css('left') == '15px');
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
2020-02-11 07:46:34 +00:00
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
# --seed--
|
|
|
|
|
|
|
|
## --seed-contents--
|
|
|
|
|
|
|
|
```html
|
|
|
|
<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>
|
|
|
|
```
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --solutions--
|
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
```html
|
|
|
|
<head>
|
|
|
|
<style>
|
|
|
|
h2 {
|
|
|
|
position: relative;
|
|
|
|
left: 15px;
|
|
|
|
bottom: 10px;
|
|
|
|
}
|
|
|
|
</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>
|
|
|
|
```
|