freeCodeCamp

2.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId
587d781e367417b2b2512aca	Move a Relatively Positioned Element with CSS Offsets	0	https://scrimba.com/c/c9bQEA4	301065

Description

The CSS offsets of top or bottom, and left or right tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the h2 downwards. Likewise, using a left offset moves an item to the right.

Instructions

Use CSS offsets to move the h2 15 pixels to the right and 10 pixels up.

Tests

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');
  - 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');

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

<head>
<style>
  h2 {
    position: relative;
    left: 15px;
    bottom: 10px;
  }
</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>

2.1 KiB Raw Blame History