Position is another CSS property that deals with alignment and organization of HTML elements. Generally partnered with the position property are the alignment properties: top, right, bottom, left. In a specific combination of position and alignment properties, you obtain the same styling that is used for the bottom footer of this page. Notice how it always seems to stick to the bottom even when you scroll down. That is because it is rendered to the window and not technically to the page.
CSS Position and Alignment Properties Values
- absolute – stays where you tell it regardless of other objects
- fixed – appended to window (moves when user scrolls)
- relative – placed next its normal position
- static – placed in its default position
The result box is rather useless on this particular example, but I’ll keep it anyway. We already understand the color and background-color properties. So, first we’ll discuss position. When set to fixed, the position properties tells the browser to join that to the window and not to the actual document. This allows a nice smooth element like a footer or a header to remain in the user’s view the entire time. Just as in important is the alignment property, which in this case is bottom. This property tells the browser where to join the fixed positioned element. I am not going to show the other properties, in an effort not to destroy my page layout so that you can still navigate. So, feel free to tinker around with them.
References