CSS position vs offset

CSS position vs offset
0.0 0

#1

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


#2

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.


#3

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.