CSS position vs offset

CSS position vs offset


Tell us what’s happening:
I need to understand difference between offset and position property of css.

Your code so far

  h2 {
    offset: relative;
  <h1>On Being Well-Positioned</h1>
  <h2>Move me!</h2>
  <p>I still think the h2 is where it normally sits.</p>

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:


Here’s the original state of the code in that challenge:

  h2 {
    position: relative;


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.