2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
|
id: 587d781e367417b2b2512acb
|
2020-12-16 07:37:30 +00:00
|
|
|
title: 绝对定位的参照物是元素的父元素
|
2018-10-10 22:03:03 +00:00
|
|
|
challengeType: 0
|
2020-02-11 07:46:34 +00:00
|
|
|
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
|
|
|
|
forumTopicId: 301060
|
2021-01-13 02:31:00 +00:00
|
|
|
dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
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-02-06 04:42:36 +00:00
|
|
|
接下来要介绍 CSS `position` 属性的取值选项 `absolute`，它的含义是相对于其包含块定位。 和 `relative` 定位不一样，绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。 这样我们就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
绝对定位比较特殊的一点是元素的定位参照于最近的 *positioned* 祖先元素。 如果它的父元素没有添加定位规则（默认是 `position: relative;`），浏览器会继续寻找直到默认的 `body` 标签。
|
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-02-06 04:42:36 +00:00
|
|
|
通过设置 `position` 属性值为 `absolute`，将 `#searchbar` 元素固定到它的父元素 `section` 的右上角。 即设定其 `top` 和 `right` 为 50 像素。
|
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
|
|
|
`#searchbar` 元素的 `position` 属性值应为 `absolute`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
|
assert($('#searchbar').css('position') == 'absolute');
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
|
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
`#searchbar` 元素的 `top` 属性值应为 50px。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
|
assert($('#searchbar').css('top') == '50px');
|
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
`#searchbar` 元素的 `right` 属性值应为 50px。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
|
assert($('#searchbar').css('right') == '50px');
|
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
|
|
|
|
|
<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>
|
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --solutions--
|
|
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
```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>
|
|
|
|
|
```
|
