greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added solution to Change an Element's Relative Position (#34281) 

* Update index.md

* Add full solution
pull/35320/head
The Coding Aviator 2019-03-09 19:42:14 +05:30 committed by Randell Dawson
parent dd9566e96e
commit 526e3331c6
1 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
guide/english/certifications/responsive-web-design/applied-visual-design/change-an-elements-relative-position/index.md
View File

@ -1,10 +1,57 @@
---
title: Change an Element's Relative Position
---
![: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:")
### ![:checkered_flag:](https://forum.freecodecamp.com/images/emoji/emoji_one/checkered_flag.png?v=3 ":checkered_flag:") Problem Explanation:
* You need to write a CSS selector which will move all the `h2` elements on the page by `15px` from the top.
## Change an Element's Relative Position
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/applied-visual-design/change-an-elements-relative-position/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
Use `position: relative;`.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
> _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 `top: ;` property.
> _try to solve the problem now_
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 3
Target the `h2` using `h2{}`.
> _try to solve the problem now_
## Spoiler Alert!
![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
**Solution ahead!**
```html
<style>
h2 {
position: relative;
top: 15px;
}
</style>
<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 all the `h2` elements on the page where the corresponding stylesheet/styles would be imported/used.
* `position: relative;` sets the `h2` to be positioned relatively, but in normal flow, i.e. it would have no effect on the surrounding element's positions.
* `top: 15px;` moves the `h2` `15px` from the top, as required by the challenge.
* Note: Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.