2.3 KiB
title
| title |
|---|
| Change an Element's Relative Position |
Remember to use Read-Search-Ask if you get stuck. Try to pair program 
and write your own code 
Problem Explanation:
- You need to write a CSS selector which will move all the
h2elements on the page by15pxfrom the top.
Change an Element's Relative Position
Hint: 1
Use position: relative;.
try to solve the problem now
Hint: 2
Use the top: ; property.
try to solve the problem now
Hint: 3
Target the h2 using h2{}.
try to solve the problem now
Spoiler Alert!
Solution ahead!
<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 theh2elements on the page where the corresponding stylesheet/styles would be imported/used. -
position: relative;sets theh2to be positioned relatively, but in normal flow, i.e. it would have no effect on the surrounding element's positions. -
top: 15px;moves theh215pxfrom 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.