CSS 中的 position 属性 可以很容易的将指定的元素定位到理想的位置。但在使用这一属性时需要注意，尤其是在表格元素中。为了说明此问题， 我们先来看个 DEMO 。

点击按钮后，图片所在的 td 的 CSS 属性 position 定义成 relative，但是除 Exploer 外其内部的绝对定位的层，没有重新定位到「期望的位置上」。

在这里有个详细的讨论 ，主要的原因可以基本上认定为 Exploer 与其他浏览器针对表格元素的理解不同所致。

根据 W3C 的相关描述

The position and size of an element's box(es) are sometimes calculated 
relative to a certain rectangle, called the containing block of the element.

另，感谢 圆心提供另个参考 （ 来源 ）

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.

可以认为定位的父容器应为块（block）元素（td 默认的 display 属性为 tab-cell），从上面的内容可以看出，针对'position:relative' 这一属性对于大部分的表格元素（display:table-*）而言是未定义的，而 Exploer 则没有遵循这一规范（所以得到了「期望的结果」）。

其实将 DEMO 中的相应 td 的 CSS 属性改成 display:block; 就能更好的说明问题（注意，将 td 的 display 属性改成 block，严格意义上理解，它已经不是表格的一部分）。

要解决这问题，目前已知的一种做法就是在 td 中再套一层 div 等 block 元素。

这可能这又引起的另个问题，就是无法像表格元素一样垂直居中，不过我们 可以参考这里的解决方案 （更新， 还有 小虎 的另种解决方案 ）。

--EOF--