Overview

table

• Out of the box
• Table set to position:relative
• Table wrapped in div
• Positioned elements shifted into place
• Positioned elements wrapped in shim elements
• Positioned elements wrapped in shim elements - with additional generated content

displaytable

• Out of the box
• Table set to position:relative
• Table wrapped in div
• Positioned elements shifted into place
• Positioned elements wrapped in shim elements
• Positioned elements wrapped in shim elements - with additional generated content

Absolute positioning within tables

• IE treats the pos:absolute right with no further treatment, ie. it does actually apply pos:relative to the td
• pos:rel aplied to the table, brings Safari and Opera into line vertically. But obviously, the horizontal relative is the whole width of the table
• To bring Gecko in line, we need to wrap the table in a div.
• Left alignment is fine, we just set pos: absolute and no horizontal measurements, shifting with margin-left to deal with any applied padding if necessary
• Right alignment requires either knowing the right point of the containing td and setting right accordingly (remembering to set it to 0 for IE)...
• ... or if we know the td's width, adding a shim which is set to be the width of the td (same shifting applies as per left alignment described above) and then either right text-aligning or right floating or absolutely positioniong in the shim

Absolute positioning within display:table-cell styled elements

• Obviously IE doesn't work - but it should be trivial enough to provide a float plus overflow-hidden solution for them.
• Apart from that, this works exactly the same as for the actual table, except that pos:rel is not required on the table to bring Safari and Opera into line vertically. But Gecko is still no dice.

Generated content

Gecko is just rubbish

What the heck is going on?

relative

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

http://www.w3.org/TR/CSS21/visuren.html#choose-position

9.7 Relationships between 'display', 'position', and 'float'

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

1. If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
2. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
3. Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.
4. Otherwise, if the element is the root element, 'display' is set according to the table below.
5. Otherwise, the remaining 'display' property values apply as specified.

Specified value	Computed value
inline-table	table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

So, pos:absolute in a td should result in block. And what does that actually mean?

http://www.w3.org/TR/CSS21/generate.html says nothing about position.