2.6 KiB
2.6 KiB
id, title, challengeType, videoUrl, forumTopicId, localeTitle
| id | title | challengeType | videoUrl | forumTopicId | localeTitle |
|---|---|---|---|---|---|
| 587d781e367417b2b2512acb | Lock an Element to its Parent with Absolute Positioning | 0 | https://scrimba.com/c/cyLJ7c3 | 301060 | 绝对定位的参照物是元素的父元素 |
Description
position 属性的取值选项 absolute，absolute 相对于其包含块定位。和 relative 定位不一样，absolute 定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。
absolute 定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是 position:relative;）,浏览器会继续寻找直到默认的 body 标签。
Instructions
position 为 absolute，固定 #searchbar 元素到它父元素 section 的右上角。即设定其 top 和 right 为 50 像素。
Tests
tests:
- 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 属性。');
Challenge Seed
<style>
#searchbar {
}
section {
position: relative;
}
</style>
<body>
<h1>欢迎！</h1>
<section>
<form id="searchbar">
<label for="search">搜索：</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>
Solution
// solution required