I'll warn you in advance, this is not a reference for every available position value in existence, it's about
Why do you want to assign any position value to an element? Because you don't have much of a choice in the matter. See, position has a set default for when you do not specify the property, so it's specified whether you like it or not. The default is static, which means that every element follows the document flow if not otherwise stated. You can try and move an element by using the top, bottom, left, or right property, whichever - your static element won't budge an inch. That's when you'll want to use absolute and/or relative positioning. By giving position either of these values, you'll be able to move an element and position it.
The main difference between the two is that absolute disregards every other element in your document. It is disconnected from the document flow, so to speak, which comes in handy when you have an element you don't want to interrupt the other elements. Its borders are the top border of your document, the bottom border, the left border, and the right border (there's some more to this, which I'll explain shortly; stay tuned). Careful here, because while your document may be flexible, absolute positioning definitely is not. It will always be in the place you choose, and it won't automatically adapt to any changes you make.
Relative positioning allows for use of the top, bottom, right, and left properties, too, but it is still part of the document flow. Other elements respond to it, and when moving the relative positioned element it will adhere to the element's borders it is part of. For example, if you declare an element display: inline; and position: relative; the object will use the line-height as its indicator.
Now, get this: you can use them together and get some more use out of them. For example, an absolute positioned element will always adhere to the borders of the closest parent element with a position (absolute or relative, respectively). Which means if you define a parent element of a absolute positioned element as relative, the absolute positioned element will be movable inside the borders of the relative, instead of using whichever element container further up has its position defined. That's a whole world of useful - info bubbles, hover container, and I'm sure a lot of stuff I didn't think of yet.
One more thing: You will NEED to define the position property for any element you want to use z-index with (z-index is used for element stacking purposes; an element with a z-index of 20 will always be layered over an element with a lower z-index value. Not getting into that now, just letting you know in case you wondered why z-index doesn't work for you).
Well, okay, not that quick an info fix, but an info fix nonetheless.
position: relative;
position: absolute;
position: absolute;
Why do you want to assign any position value to an element? Because you don't have much of a choice in the matter. See, position has a set default for when you do not specify the property, so it's specified whether you like it or not. The default is static, which means that every element follows the document flow if not otherwise stated. You can try and move an element by using the top, bottom, left, or right property, whichever - your static element won't budge an inch. That's when you'll want to use absolute and/or relative positioning. By giving position either of these values, you'll be able to move an element and position it.
The main difference between the two is that absolute disregards every other element in your document. It is disconnected from the document flow, so to speak, which comes in handy when you have an element you don't want to interrupt the other elements. Its borders are the top border of your document, the bottom border, the left border, and the right border (there's some more to this, which I'll explain shortly; stay tuned). Careful here, because while your document may be flexible, absolute positioning definitely is not. It will always be in the place you choose, and it won't automatically adapt to any changes you make.
Relative positioning allows for use of the top, bottom, right, and left properties, too, but it is still part of the document flow. Other elements respond to it, and when moving the relative positioned element it will adhere to the element's borders it is part of. For example, if you declare an element display: inline; and position: relative; the object will use the line-height as its indicator.
Now, get this: you can use them together and get some more use out of them. For example, an absolute positioned element will always adhere to the borders of the closest parent element with a position (absolute or relative, respectively). Which means if you define a parent element of a absolute positioned element as relative, the absolute positioned element will be movable inside the borders of the relative, instead of using whichever element container further up has its position defined. That's a whole world of useful - info bubbles, hover container, and I'm sure a lot of stuff I didn't think of yet.
One more thing: You will NEED to define the position property for any element you want to use z-index with (z-index is used for element stacking purposes; an element with a z-index of 20 will always be layered over an element with a lower z-index value. Not getting into that now, just letting you know in case you wondered why z-index doesn't work for you).
Well, okay, not that quick an info fix, but an info fix nonetheless.
