Austin Web Design Blog

Absolute, Relative, and Fixed Positioning

The CSS position property can be a powerful tool in web page layout if you know how to use it well. Along with the float property it can help you put any item anyplace on the page without the assistance of tables. Let’s go over the different position properties and their differences.

Take a look at the W3C Schools page on the position property. For basic definitions of the values static, fixed, relative, absolute, and inherit.

Position:inherit will take the containing element position and apply it to your element.

Position:static is the default position. Use this to override a position value and return the item to the normal flow of the document.

Position:fixed will position an element according to the browser window. For example, if you specify top:100; left: 100; the item will be taken out of its normal place in the document and will then always be 100px from the top and 100px from the left of your browser window, not the web page container. The item will be fixed there even if you should scroll. This position is useful if you want an advertisement or navigation to always be present regardless of how much someone should scroll up or down the page.

Position:relative will position an object relative to its parent container. You can specify top:10px, for example, and the item will be placed 10 pixels lower than the location where it normally would have been placed. If there is 10 pixels of padding in the parent container and you specify top: 10px, the item will be positioned 20px down from the top of the parent container. An important aspect of this position property is that other items before, after, or containing the element will not be moved from their original position, so there may be some overlapping. The item with position:relative can also break out of bounds of its containing element as this property removes it from the natural flow of the document.

Position:absolute is simple in concept but can be tricky to work with on the page as it is easily confused with either the properties of fixed positioning or relative positioning. Specifying top, right, bottom or left values will offset the element according to the nearest ancestor with a position property specified with value of either relative or absolute. When absolute positioning is specified its parent container will be checked for a position property. If there is none specified, the next ancestor containing element will be checked and then the next until a containing element can be found. If no containing element has position specified an absolutely positioned element will be positioned according to the browser window.

With absolute positioning as with relative positioning, the containing block will not expand around the element. In order to work around this issue, height must be specified. Absolute positioning may not be best for most basic page layouts, however it is a powerful tool in helping you place items on a page exactly where you would like them to. Positioning can be used to place columns of differing height on your page, and therefore may not be the best solution if you’re looking for flexibility in content.

To best learn to use positioning properties on your page, create some basic squares contained one inside the other like Chinese boxes. Practice altering offsetting and changing the type of positioning to see how these boxes will behave. In no time you will be able to take advantage of the position property and work toward more advanced usages such as with customizing Javascript library plugins, a powerful enhancement to your web page.

Wed, 25 May 2011 08:29

Tags , , , , , , , , , , ,

Comment Absolute, Relative, and Fixed Positioning