Tell us what’s happening:
I need to understand difference between offset and position property of css.
Your code so far
<head>
<style>
h2 {
offset: relative;
top:10px;
right:15px;
}
</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>
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets
Here’s the original state of the code in that challenge:
<style>
h2 {
position: relative;
}
</style>
Compare that with the code you posted above, and I think you’ll find the problem.
Position and Offset properties do entirely different things.
The Position property only tells the browser how to position the element (absolute, relative, fixed etc.), not where. I myself do not understand this property that well, but you don’t need to touch it in this exercise.
Offset is not a property itself, it is a group of properties. These properties are top, bottom, left and right. It basically moves the element away from its original position. If you want to move the element up a bit, you write bottom: 10px; so it moves it away from the bottom by 10px.
So the position: relative should stay the same in your code, you only need to use the bottom and left offsets to position it (the opposite of what you used).
I have a limited understanding of both though, so maybe wait for someone more experienced to explain it better.
3 Likes
@bitrishi @RonArnor @michaelfoland The answer is the you need to do the opposite of what is mentioned in the problem for example
The Question:
<head>
<style>
h2 {
offset: relative;
top:10px;
right:15px;
}
</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>
The purpose of the challenge is the move the elements from its current position which the css property offset is supposed to do.
h2 {
offset: relative;
bottom:10px;
left :15px;
}
Hope this helps
1 Like
You have the purpose correct, but you’ve misread the instructions, there is no CSS property called offset.
3 Likes
Your right sorry for the typo. Thanks for pointing it out
h2 {
position: relative;
bottom:10px;
left:15px;
}
1 Like