Home » Tutorials » CSS » Position and Alignment

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
<style type="text/css">
    div.special
    {
        position:fixed;
        bottom:30px;
        background-color:#000;
        color:#fff;
    }
</style>
<div class="special">
    Sample Text
</div>
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



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Position and Alignment". After Hours Programming. Accessed on September 28, 2022. https://www.afterhoursprogramming.com/tutorial/css/position-and-alignment/.

  • Stewart, Suzy. "Position and Alignment". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/css/position-and-alignment/. Accessed 28 September, 2022.

  • Stewart, Suzy. Position and Alignment. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/css/position-and-alignment/.



0 thoughts on “Position and Alignment”

Leave a Comment

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