2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
|
id: 587d781e367417b2b2512acb
|
|
|
|
|
|
title: Lock an Element to its Parent with Absolute Positioning
|
|
|
|
|
|
challengeType: 0
|
2020-02-11 15:46:34 +08:00
|
|
|
|
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
|
|
|
|
|
forumTopicId: 301060
|
|
|
|
|
|
localeTitle: 绝对定位的参照物是元素的父元素
|
2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## Description
|
2020-02-11 15:46:34 +08:00
|
|
|
|
<section id='description'>
|
|
|
|
|
|
接下来要介绍 CSS <code>position</code> 属性的取值选项 <code>absolute</code>，<code>absolute</code> 相对于其包含块定位。和 <code>relative</code> 定位不一样，<code>absolute</code> 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。
|
|
|
|
|
|
<code>absolute</code> 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是 <code>position:relative;</code>）,浏览器会继续寻找直到默认的 body 标签。
|
|
|
|
|
|
</section>
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
|
## Instructions
|
2020-02-11 15:46:34 +08:00
|
|
|
|
<section id='instructions'>
|
|
|
|
|
|
通过声明 <code>position</code> 为 <code>absolute</code>，固定 <code>#searchbar</code> 元素到它父元素 <code>section</code> 的右上角。即设定其 <code>top</code> 和 <code>right</code> 为 50 像素。
|
|
|
|
|
|
</section>
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
|
## Tests
|
|
|
|
|
|
<section id='tests'>
|
|
|
|
|
|
|
|
|
|
|
|
```yml
|
|
|
|
|
|
tests:
|
2020-02-11 15:46:34 +08:00
|
|
|
|
- text: '<code>#searchbar</code> 元素应当有一个值为 <code>absolute</code> 的 <code>position</code> CSS 属性。'
|
|
|
|
|
|
testString: assert($('#searchbar').css('position') == 'absolute', '<code>#searchbar</code> 元素应当有一个值为 <code>absolute</code> 的 <code>position</code> CSS 属性。');
|
|
|
|
|
|
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>top</code> CSS 属性。'
|
|
|
|
|
|
testString: assert($('#searchbar').css('top') == '50px', '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>top</code> CSS 属性。');
|
|
|
|
|
|
- text: '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>right</code> CSS 属性。'
|
|
|
|
|
|
testString: assert($('#searchbar').css('right') == '50px', '你的 <code>#searchbar</code> 元素应当有值为 <code>50px</code> 的 <code>right</code> CSS 属性。');
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
## Challenge Seed
|
|
|
|
|
|
<section id='challengeSeed'>
|
|
|
|
|
|
|
|
|
|
|
|
<div id='html-seed'>
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<style>
|
|
|
|
|
|
#searchbar {
|
2020-02-11 15:46:34 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2018-10-10 18:03:03 -04:00
|
|
|
|
}
|
|
|
|
|
|
section {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<body>
|
2020-02-11 15:46:34 +08:00
|
|
|
|
<h1>欢迎！</h1>
|
2018-10-10 18:03:03 -04:00
|
|
|
|
<section>
|
|
|
|
|
|
<form id="searchbar">
|
2020-02-11 15:46:34 +08:00
|
|
|
|
<label for="search">搜索：</label>
|
2018-10-10 18:03:03 -04:00
|
|
|
|
<input type="search" id="search" name="search">
|
|
|
|
|
|
<input type="submit" name="submit" value="Go!">
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
## Solution
|
|
|
|
|
|
<section id='solution'>
|
|
|
|
|
|
|
2020-02-11 15:46:34 +08:00
|
|
|
|
```html
|
2018-10-10 18:03:03 -04:00
|
|
|
|
// solution required
|
|
|
|
|
|
```
|
2020-02-11 15:46:34 +08:00
|
|
|
|
|
2018-10-10 18:03:03 -04:00
|
|
|
|
</section>
|
2020-02-11 15:46:34 +08:00
|
|
|
|
|
