20. maj 2009

Troubleshooting Your CSS


Positioning Redux

Since our imaginary issue has been a layout bug, here is a brief recap on positioning.  There are 5 ways to position an element: static, relative, float, absolute and fixed.  Static positioning is the default position for DIV’s if you don’t declare any position on them in your CSS.  Static and Relative pretty much behave the same way in regards to the flow of the document; they stack on top of each other  (think LEGO blocks) in the order they are arranged in the HTML.  This is the most reliable way to layout a page.  There aren’t really any browser issues with static/relative-ly positioned DIV’s.

Floated DIV’s will allow a block level element to sit side by side with another block level element, or one DIV next to another.  In regards to the flow of the document, they are removed from the flow, still interact with other elements, and, unlike absolute positioning, can be brought back into the flow with a clear: rule.  Floats are usually where the chaos begins for a new-to-css-developer.

Absolutely positioned DIV’s will sit anywhere you tell them to; they’re the well behaved child that just sits there, quietly.  In regards to the flow of the document,  they are completely removed.  They do not react with any other DIVs.  The catch here is how the DIV is positioned.  You can use the top, right, bottom, left rules to place the div, however those coordinates need to be referenced from some initial point.  In CSS an absolutely positioned DIV will start it’s coordinates from the next closest relatively positioned DIV.  If there are no relatively positioned DIV’s, then it will get them from the viewport (browser window).

[Emphasis mine]

Husk det! :-)

Noah Stokes | Es Bueno / 3 Step Process for Troubleshooting Your CSS | Step 2