说说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)定位系列(一)

展开阅读全文

没有更多推荐了,返回首页