CSS Positioning is the web design industries misunderstood nephew, in the sense that it’s a big part of the family but not everyone get him.  Truth-be told Positioning is one, if not the most important part of CSS.  Sure you can get the job done without it, but the day I fully grasped its power my builds took about a third of the time, thus making me more valuable my clients and other employers.

CSS Positioning is becoming an absolute must in the “new web”.  With Jquery animations and complex designs becoming more and more popular it’s a necessity to master this CSS property.

Elements are positioned using 4 directional properties.. top, left, right and bottom.  They each work differently according to the set positioning type.

There are three basic properties to getting positioning to work, and we’ll talk about each.

• Choose the right type of Position of the Situation
• The Coordinates (top, left, right, bottom)
• The z-index to overlap elements (optional)

Choose the right type of Position of the Situation

There are 4 types of positioning, lets break them down.

Position: static is the default position type to all CSS elements.   The Static elements are always positioned according to normal float and margin properties of CSS.

Position: fixed is when an element is positioned relative to the entire browser window.  These types of elements will not move even when the browser window is scrolled horizontally and vertically.

Example: http://www.digimantra.com/

#fixed_div {
position:fixed;
top:150px;
left:0;
}

Position: relative is pretty self-explanatory, its relative to its current position.  Relative positioning is commonly used to set a new coordinate origin for an element.  Example, if you were to add left:10px and top:10px to an element, that element would then move up and to the left 10px but still preserving the empty space of 10px on the bottom and right.  This allows you to overlap elements for a more complex design.    Relative positioning is also used to set the base position of its absolutely positioned child elements, we’ll get to that later.

Position: absolute is pretty useless on its own, but a element with absolute positioning can be placed anywhere on the canvas within an X and Y coordinate.   By default each element has a base position of 0,0 in the top left corner of your browser view port (html).  The positioned absolute element will be removed from the normal flow of the document completely and all white space will be removed with it, unlike its “cousin” relative positioning.

The Coordinates (top, left, right, bottom)

Pretty easy here, the coordinates are the X and Y position on the canvas.  You can specify them from the CSS properties top, left, right or bottom.   All by default will be set to 0.  Relative will be the X and Y “relative” to its current position.  Absolute will be the X and Y according to its relative positioned parent.  Fixed will be the X and Y according to the Browsers view port.  And finally Static does not take X and Y coordinates, they will be ignored all together.

The z-index to overlap elements (optional)

Complex designs sometimes all for elements to overlap, sometimes referred to as layers by designers (in reference to the layers commonly used in the Abobe application Photoshop).  Think of the Z-Index property like stacking layers of paper.  You have 10 pieces of paper on top of each other, if you were to give each one a z-index the top would be 9 and the very bottom 0 and each piece a sequential number in between.    This is pretty easy to grasp, but the only issue you’ll run into is with Internet Explorer.    Unlike more modern browser that treats each element as its own “z-index parent” where you can place and element inside a #header div over an element in a #content div effortlessly, IE is a little stricter when it comes to indexing.  So best practice is to make the parent element have a higher z-index than the element you are trying to overlap.  You won’t find much documentation on this bug, but definitely one I’ve ran into from time to time, especially when working with CSS drop down menus.

So how’s this all come together?  How do I decrease my build time?

I’m glad you asked.  This is where everything clicked for me in web design.  Combining relative positioned elements with absolute positioned elements is the quickest and most efficient way to lay out static areas.    By static areas I don’t mean non-PHP areas,  I mean areas on a website with a fixed height that doesn’t change with content such as headers, footers, and for the purpose of this example a constrained fixed layout.

You can see by setting the container DIV to position relative I’ve now set a new origin for the inner absolutely positioned elements.  I think the diagram speaks for itself.  All the inner children of the relatively positioned parent now move and overlap each other within that contained area.   Have questions or comments?  Please ask!