Last week, I demonstrated how to use Firebug to examine the box properties of any element in the document. This week, I will demonstrate how to use Firebug to debug positioning.

First, open the last example in the Absolute Positioning lecture page. This example contains a relatively positioned containing block, "topAncestorRelative", that serves as the positioning context for a child element, "containerAbsolute", which then serves as the positioning context for its child, "nestedAbsolute".

While you are viewing the Absolute Positioning example, start Firebug. Click Inspect in the menu bar, and click on the yellow-backgrounded topAncestorRelative DIV to lock Firebug on this element. Viewing the Styles tab in the Properties panel (right panel) you'll see that this element has been relatively positioned. Note also that there are no offsets set for the topAncestorRelative DIV, so topAncestorRelative is positioned in the normal flow of the document. This has the same effect as being statically positioned, with the important difference that topAncestorRelative can now provide positioning context to child elements.

topAncestor CSS

Now click on the Layout tab to view the box model properties. The outer numbers indicate the offsets from the element's positioning context, which is top:119px and left:13px (Note: your offsets may be slightly different, depending on the window size and the actual values generated by the browser). This has not been explicitly set by any rules. Rather, it is the position relative to the BODY in the normal flow. Float your cursor over the box model in the Properties panel, and rules and guidelines appear. As you can see, the rulers are up against the top and left edges of the viewport, indicating that the positioning context of the topAncestorRelative DIV is the BODY.

topAncestor positioning

Now use the Inspector to lock in the pink-backgrounded nestedAbsolute DIV. Click on the Style tab in the Properties panel to see that this DIV has been positioned absolutely, with offsets of top:90px and left:40px. Let's use the Layout tab to determine the positioning context of the nestedAbsolute DIV.

nestAbsolute CSS

Click on the Layout tab in the Properties panel, and hover the cursor over the box model. Again, the rulers and guidelines appear. In the Layout tab, you can see that the top offset is 90 pixels and the left offset is 40 pixels, which match the offsets in the rule for this DIV.

nestAbsolute positioning

Note now, that the rulers are against the top and left edges of the containerAbsolute DIV. This indicates that the positioning context for the nestedAbsolute DIV is the containerAbsolute DIV.

You can select a parent element by simply clicking on the element's name in the Document Node Navigator.

Now use the Inspector to lock in the gray-backgrounded containerAbsolute DIV. Click on the Style tab in the Properties panel to see that this DIV has been positioned absolutely, with offsets of top:55px and left:55px.

containerAbsolute CSS

In the Layout tab, while hovering the cursor over the box model, you will see that the rulers are now against the top and left edges of the topAncestorRelative DIV. This indicates that the positioning context for the containerAbsolute DIV is the topAncestorRelative DIV.

containerAbsolute positioning

Let's do one last thing while we are locked in on the containerAbsolute DIV. Suppose we weren't happy with the positioning of the containerAbsolute DIV. We can use Firebug to fine-tune the position of the containerAbsolute DIV by adjusting the offsets dynamically in the Layout tab.

containerAbsolute position adjustment

Click on the top offset, 55, at the top of the box model. This becomes a dialog so that you can now adjust the offset. Using the cursor keys, you can adjust the offset up or down while watching its effect in the browser window. You can also type a new number into this field. Once you're satisfied with the placement, you can transfer this value to your style sheet. (Note also that as you repositioned the containerAbsolute DIV, the nestedAbsolute DIV moved along with it, since the containerAbsolute DIV is the positioning context for the nestedAbsolute DIV.)

containerAbsolute AND nestedAbsolute both moved

As you've seen, Firebug can be a very useful tool to fine-tune positioned elements. There are many other Firebug features specific to developing CSS. I encourage you to view the Firebug video presentation Open in a New Window given by the designer of Firebug, Joe Hewitt. The Firebug website Open in a New Window. also has detailed information about its many features. Simply click on the descriptions of the various features for detailed information.

Resources