Positioning elements with CSS is one of those tasks that seem to be relatively intuitive. Unfortunately, quite often, it is not. Developing the right mental framework for exactly how positioning works is essential for a novice web designer. So let's jump in!
The default position for all elements is static, which means the element appears where it normally would in the document. Of course normally, you don't see this setting, since it's the default.
div {
position: static;
}
Next is relative, which moves the element relative to where it would normally appear. The properties that can be used in conjunction with relative are top, bottom, left and right. For example, the below code would move an element 20 pixels down and 10 pixels to the right.
div {
position: relative;
top: 20px;
left: 10px;
}
The third value for position is absolute, which moves specifies the position relative to the the nearest ancestor. As another example, the below code would move an element into the top right corner of the browser, because the nearest ancestor is the body element. If you look, around, you might just see a little red box...
div {
position: absolute;
top: 50px;
right: 3%;
}
Finally, we have fixed. A fixed element will stay in the same position on the browser screen even as you scroll up or down, just like our little green friend!
div {
position: static;
top: 150px;
right: 3%;
}
To go a little more in depth, I recommend taking a look at this tutorial. Get positioning!
absolute!