3.8 KiB
3.8 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d781e367417b2b2512aca | Move a Relatively Positioned Element with CSS Offsets | 0 | 使用CSS偏移移动相对定位的元素 |
Description
top
或bottom
, left
或right
的CSS偏移告诉浏览器将项目相对于文档正常流程中的位置偏移多远。您将元素偏离给定的点,这会使元素远离引用的边(有效地,相反的方向)。正如您在上一次挑战中看到的那样,使用顶部偏移将h2
向下移动。同样,使用左偏移会将项目向右移动。 说明
h2
移动15像素向右移动10像素。 测试
tests: - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
挑战种子
<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>
解
// solution required
Instructions
h2
移动15像素向右移动10像素。 Tests
tests:
- text: 您的代码应使用CSS偏移量来相对定位<code>h2</code> 10px。换句话说,将它从通常所在位置的<code>bottom</code>移开10px。
testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");'
- text: 您的代码应该使用CSS偏移来相对地将<code>h2</code> 15px定位到右侧。换句话说,将它从通常所在的位置<code>left</code>移动15px。
testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
Challenge Seed
<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>
Solution
// solution required