Getting the containing box of a given one in the CSS box-model [closed]

Question

My understanding is that most layout (positioning and dimension) problems with CSS are the result of a bad understanding of which is containing box of the box you are trying to lay out.

However as far as I can tell, there is no means to know which is that containing box in browsers development tools like firebug, chrome or opera's inspection utilities.

So does anyone know a reliable way to get that information ? And if possible in a visual way, e.g. like the box margin, border and padding boundaries highlighting present in all modern browser.

Answer 1

.offsetParent

Like all really useful stuff not part of any specs, but seems supported by all browsers. Only checked on FF3.5,3.6,5,6, IE8 and Chrome13 though.

For visual aid you then just have to find the property in the DOM inspector of your browser and use its element highlighting feature the usual way.

Answer 2

However as far as I can tell, there is no means to know which is that containing box in browsers development tools like firebug, chrome or opera's inspection utilities.

Not true.
Open the Firebug pane, switch to the HTML tab and click the icon that looks like a rectangle with a mouse curser over it(second from the left). Mouse around in the browser pane and you'll see a breadrumb showing you the DOM path to whatever you're over at the moment, just above the panel showing you the actual markup involved.

If you have the Web Developer Toolbar, go to Information->Display Element Information(or Ctrl-Shift-F) and mouse around. A similar breadcrumb display will appear below the toolbar. Click again locks to the current element.