freeCodeCamp

3.8 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d781e367417b2b2512aca	Move a Relatively Positioned Element with CSS Offsets	0		使用CSS偏移移动相对定位的元素

Description

top或bottom ， left或right的CSS偏移告诉浏览器将项目相对于文档正常流程中的位置偏移多远。您将元素偏离给定的点，这会使元素远离引用的边（有效地，相反的方向）。正如您在上一次挑战中看到的那样，使用顶部偏移将h2向下移动。同样，使用左偏移会将项目向右移动。

说明

使用CSS偏移将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

使用CSS偏移将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

3.8 KiB Raw Blame History Unescape Escape