1. Technology


Learn How to Position Your Layouts with CSS Positioning


Default Positioning - How Does the Browser Do It?

If you build a Web page and don't include any positioning rules the Web browser will decide how to place your elements on the page. This is called normal flow. It is the normal flow of elements on the Web page. Browsers will display elements in the following fashion:

  1. In the order the elements appear in the HTML - the first element after the <body> tag appears first, the second second, and so on.
  2. Block-level elements appear with line breaks between them while inline elements stack horizontally until they reach the edge of the browser window, then they wrap to the next line.
  3. Images are inline elements, so they will appear with their bottom edge aligned with the baseline of the text they are next to. And any text following an image will line up on the baseline of the image.

If you're not sure whether an item is positioned as normal flow, you can set that position with the CSS position property:

position: static;

Example of Normal Flow

Defining Position

When you're defining CSS position, you have to define it in relation to something on the page. Your three options are:

  • relative
  • absolute
  • fixed

Relative positioning means that you're asking the browser to place that element into a position relative to where it would have been placed if it were still in normal flow. This is useful if you want to move an element just slightly but not position the entire page and every element on it. Relative positioning puts the starting point as the upper left pixel of the element based on where it would have landed in normal flow.

Relative positioning moves that element to a new location in the document flow, and then continues the normal flow for elements that come after, but with the new location as the start. So if you move a paragraph down 35 pixels, then all following paragraphs will be 35 pixels lower than they would have been in normal flow.

Example of Relative Positioning

Absolute positioning takes the position from a fixed point in the browser pane. This point is the upper left most pixel in the container. The container could be the browser itself or any other block-level element that the positioned element is inside. This point is 0,0. When you define an absolute position, you are defining it in relation to that point on the browser.

Absolute positioning is best used for every element on the page, or at least every block-level element (you can let the inline elements inside the blocks position themselves using normal flow). This ensures that the positioned elements don't overlap or conflict with each other. As you'll see in the example, when only one element is positioned absolutely, it can cover other content.

Example of Absolute Positioning

Fixed positions are always calculated from the upper left-most pixel of the browser window. And once they are placed in the browser window, they don't move - even if the surrounding elements are moved (such as when scrolling). This gives you an effect like a watermark.

Fixed positions are best done with the intent of being a watermark. Because they don't move when the browser scrolls, it's not always obvious that they are different from an absolute positioned element until the window is scrolled.

Example of Fixed Positioning

Moving the Elements

Once you've decided what type of positioning you want to use, there are a few CSS properties you can use to define the location:

It is best to use just top and left, as those styles have the best browser support. To move an element up using top, use negative numbers. The same is true to move an element left using the left property.

position: relative;
top: -15px;
left: -15px;

This will place the element up 15 pixels and to the right 15 pixels from where it would have otherwise landed in normal flow.

Get Comfortable with CSS Positioning

The best way to get comfortable with CSS positioning is to try it out. Take a layout that you're used to and apply different positioning rules on the block-level elements, to see what happens.

©2014 About.com. All rights reserved.