Position and Alignment

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
Example

Result
Sample Text

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

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on Google+
Google+
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

  1. The style should be..
    <style type="text/css">
    div.special
    {
    position:fixed;
    bottom:30px;
    background-color:#000;
    color:#fff;
    }
    </style>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.