Absolute positioning confusion

I have a container 开发者_如何学Cdiv, and it needs to be positioned as relative. Inside that div, I have a table. I want to display an element inside one of the table cells as absolute, relative to the containing cell, but it gets positioned relative to the container div (I think).

See this jsFiddle.

How can I set this up so that the element gets positioned relative to the td?

Make the TD position:relative as well. Absolute elements are always positioned relative to their nearest relative parent.

Since tables and table related elements can be the odd ducks of the HTML element world due to their unique behavior, it may be more reliable to simply add an inner wrapper DIV around all the contents of the TD, and make that DIV relative instead.

You can only position the div relative to it's TD parent if it's TD parent is also positioned (absolute or relative). In this case, since dealing with TDs, you want to just set it to position: relative.

See answer in this jsfiddle.

It will work if you make the td position: relative. See here: http://jsfiddle.net/u6WHH/6/

make the container and the cell relative then assign absolute to td.