1

I have a container div, 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?

Improve this question

4 Answers 4

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Man I was trying this in Firebug and it wasn't working, I just tried it on jsFiddle, and it worked. Fail. Thanks!
be aware : "The effect of 'position:relative' on [...] table-cell, and table-caption elements is undefined." (w3.org/TR/CSS2/visuren.html) =P
@mat I think you missed the second half of my answer before commenting
0

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.

Improve this answer

Comments

0

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

Improve this answer

Comments

0

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

Improve this answer

Comments