diff --git a/guide/english/certifications/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets/index.md b/guide/english/certifications/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets/index.md index e5c1ecd3a7..bcb357adc6 100644 --- a/guide/english/certifications/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets/index.md +++ b/guide/english/certifications/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets/index.md @@ -1,10 +1,49 @@ --- 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 **`Read-Search-Ask`** 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 -This is a stub. Help our community expand it. +## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1 -This quick style guide will help ensure your pull request gets accepted. +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 + + + + +

On Being Well-Positioned

+

Move me!

+

I still think the h2 is where it normally sits.

+ +``` + +### 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.