2.5 KiB
2.5 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d781e367417b2b2512acb | Lock an Element to its Parent with Absolute Positioning | 0 | 使用绝对定位将元素锁定到其父级 |
Description
position
属性的下一个选项是absolute
,它将元素相对于其父容器锁定到位。与relative
位置不同,这会从文档的正常流中移除元素,因此周围的项会忽略它。 CSS偏移属性(顶部或底部和左侧或右侧)用于调整位置。具有绝对定位的一个细微差别在于它将相对于其最近定位的祖先被锁定。如果您忘记向父项添加位置规则(通常使用position: relative;
),浏览器将继续查找链并最终默认为body标记。 Instructions
position
声明为absolute
将#searchbar
元素锁定到其section
的右上角。给它每个50像素的top
和right
偏移。 Tests
tests:
- text: '<code>#searchbar</code>元素的<code>position</code>应设置为<code>absolute</code> 。'
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
- text: '您的代码应该在<code>#searchbar</code>元素上使用50像素的<code>top</code> CSS偏移量。'
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
- text: '您的代码应该在<code>#searchbar</code>元素上使用50像素的<code>right</code> CSS偏移量。'
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
Challenge Seed
<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>
Solution
// solution required