说说table下面定位层级的问题

先来看看问题是怎样的：

问题描述：就是一个table，我们想实现的效果是hover到比如标题上面，展示一个窗口的姑且，上面展示一些详细的内容。这样的效果，虽然用div列表也可以实现，但是table总有table的优势，我们这里就讲table。

这时候就开动了，很多人的想法，很简单嘛，首先td相对定位，然后里面加个div就是外面那个窗口，绝对定位，完美解决。我只能说，太年轻了我们...

上面的思路是对的，但是呢，问题出现了......

我们先不说上面怎么解决，先来一步步分析问题。首先什么都不做，给td相对定位 position: relative; 给矩形框绝对定位position: absolute;

table美美的样子（姑且美吧...）

然后我div加上了... chrome下面

IE7：

线条都能够看清楚了，这时候马上想到，给div加z-index定位层级。这样做，常规浏览器毛病，但是在IE7没用，没用，没用！

但是得病了，得找到病因，这个很明显还是发生在层级上面。只能说明，后面的td层级比前面的高。那么子元素就算层级在高，那么父元素限制到了也高不过人家。终究翻不出五指山呀......

解决问题：

方法1：

既然层级出现在td上面，那么就在这上面做文章，给td添加递减的层级。具体怎么做，那对于各位就简单了。

看效果：

chrome:

IE7:

完美解决了。但是呢，这样做有一个问题，就是如果表格有很多很多列，那么首行的td层级不就很高了。和其他元素合在一起容易引起麻烦。

方法2：

给我们上面的弹窗div外面再加一个div，作为相对定位。不给td上面加相对定位了。

.rel{
    position: relative;
    height: 100%;
}

html中： 

最终效果和上面一样。这中方法算是比较完美的方法了，既没有那么多层级问题（层级多了很麻烦滴，自己后面都要懵），当然也不需要动用js，简直完美。

最后：

td元素和div元素对position:relative样式在各浏览器中的支持和表现形式不一致。相对定位在表格元素上使用没有定义，chrome 13期望有，firefox4上没有。

推荐张鑫旭的有关定位的文章（四个系列，给出一个链接）

CSS 相对|绝对(relative/absolute)定位系列（一）