Difference between Transform and Position - css

Question

I will start by apologising, in case my question is not relevant to the forum.
I am building a website, I am totally self taught and only been doing it a short time.
I an slightly scared i have been doing things wrong with regards to positioning objects.
I have been positioning with CSS like so:
.object{
position:relative;
left:100px;
top:20px;
}
However, lately, I have seen posts advising to use:
.object
transform:translate(100px, 20px)
but then using the transform, I am seeing other things that apparently need to be added to condition for different browsers, i.e:
-ms-transform: translate(100px, 20px); /* IE 9 */
-webkit-transform: translate(100px, 20px); /* Safari */
Would anyone be able to shed a bit of light as to the difference between position and transform?
I have looked on google but have not been able to find anything which actually explains when one should be used and when to use the other.
Thanks in advance

Answer 1

Transform attribute is more specific for pages that requires to manipulate an object such as a div. For example, if you want to rotate a div, you use transform:rotate(degrees) as CSS3 site shows here: CSS3 play rotation example. Also, transform lets you to move elements and scale them as it's explained here. Instead, position is more static meaning that you can choose where to put elements inside a web page. For example, if you are trying to position a div inside another div than you will use
position: absolute;
left: 20px;
right: 30px;
whereas to position an element relating to the normal border of the browser you will use
position: fixed;
and so on. Different types of position are shown here.
Hence, your code is correct in both ways and there is no difference. You should choose between one way or the other depending on what you want to do because transform is better to implement different kinds of effects to the elements while position is better to move elements inside another ones.