freeCodeCamp/guide/english/certifications/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets/index.md

---
title: Move a Relatively Positioned Element with CSS Offsets
---

![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")

## Move a Relatively Positioned Element with CSS Offsets

## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1

Use the `left` property for offsetting the element right.

> _try to solve the problem now_

## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 2

Use the `bottom` property for offsetting the element top.

> _try to solve the problem now_

## Spoiler Alert!

![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)

**Solution ahead!**

The following lines of code solves the challenge:
```html
<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>
```

### Code Explanation:

* The `h2{}` selects the `h2` element.
* `left: 15px;` offsets the `h2` `15px` to the right.
* `bottom: 10px;` offsets the `h2` `10px` to the top.
fix: change directory structure 2018-10-12 15:37:13 -04:00			`---`
			`title: Move a Relatively Positioned Element with CSS Offsets`
			`---`
Added solution to Move a Relatively Positioned Element with CSS Offsets (#34305) * Update index.md * Update index.md 2019-03-09 19:35:30 +05:30
			![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>`Read-Search-Ask`</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")

fix: change directory structure 2018-10-12 15:37:13 -04:00			`## Move a Relatively Positioned Element with CSS Offsets`

Added solution to Move a Relatively Positioned Element with CSS Offsets (#34305) * Update index.md * Update index.md 2019-03-09 19:35:30 +05:30			`## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1`

			Use the `left` property for offsetting the element right.

			`> _try to solve the problem now_`

			`## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 2`

			Use the `bottom` property for offsetting the element top.

			`> _try to solve the problem now_`

			`## Spoiler Alert!`

			`![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)`

			`Solution ahead!`

			`The following lines of code solves the challenge:`
			```html
			`<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>`
			```
fix: change directory structure 2018-10-12 15:37:13 -04:00
Added solution to Move a Relatively Positioned Element with CSS Offsets (#34305) * Update index.md * Update index.md 2019-03-09 19:35:30 +05:30			`### Code Explanation:`
fix: change directory structure 2018-10-12 15:37:13 -04:00
Added solution to Move a Relatively Positioned Element with CSS Offsets (#34305) * Update index.md * Update index.md 2019-03-09 19:35:30 +05:30			* The `h2{}` selects the `h2` element.
			* `left: 15px;` offsets the `h2` `15px` to the right.
			* `bottom: 10px;` offsets the `h2` `10px` to the top.