--- id: 587d781e367417b2b2512aca title: Move a Relatively Positioned Element with CSS Offsets challengeType: 0 videoUrl: '' localeTitle: Mover um Elemento Posicionado Relativamente com Deslocamentos CSS --- ## Description
Os deslocamentos de CSS de top ou de bottom e à left ou à right informam ao navegador a distância para compensar um item em relação ao local em que ele ficaria no fluxo normal do documento. Você está deslocando um elemento para longe de um determinado ponto, o que afasta o elemento do lado referenciado (efetivamente, na direção oposta). Como você viu no último desafio, usar o deslocamento superior moveu o h2 para baixo. Da mesma forma, usar um deslocamento à esquerda move um item para a direita.

Instruções

Use deslocamentos CSS para mover os h2 15 pixels para a direita e 10 pixels para cima.

Testes

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

Semente do Desafio

 <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> 

Solução

 // solution required 
## Instructions
Use deslocamentos CSS para mover os h2 15 pixels para a direita e 10 pixels para cima.
## Tests
```yml tests: - text: 'Seu código deve usar um deslocamento CSS para posicionar relativamente o h2 10px para cima. Em outras palavras, movê-lo 10px longe da bottom de onde normalmente se senta.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits.");' - text: 'Seu código deve usar um deslocamento CSS para posicionar o h2 15px de maneira relativamente à direita. Em outras palavras, mova-o a 15px da left de onde normalmente fica.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits.");' ```
## Challenge Seed
```html

On Being Well-Positioned

Move me!

I still think the h2 is where it normally sits.

```
## Solution
```js // solution required ```