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

说说table下面定位层级的问题相关推荐

iOS手机定位层级问题
iOS手机定位层级问题现象来源现象在iOS手机app内或者Safari浏览器中定位的元素设置很高的层级eg:9999, 想实现的最上层的效果,例如代码: <div style=" ...
Element UI table 修改定位
父组件 //外部使用自定义 fn_UpdateAndSetSelectRow(aKey_Value,akey_Param,aNewObj,aParam,aComParare){this.$nextT ...
相对、绝对、固定定位，以及其层级关系和脱离文档流的影响
定位:一般父级用相对定位,子级用绝对定位 1.相对定位:position:relative 2.绝对定位:position:absolute 3.固定定位:position:fixed 默认stati ...
selenium自学笔记---ecshop购买脚本 xpath定位元素（下拉框，单选框）
本机环境:xamppv3.2.1+ecshop3.0 1.元素定位写对,却一直报错,发现是页面元素加载的太慢,所以加上延时 from selenium import webdriverimport t ...
CSS3 浮动与定位
CSS3 浮动与定位浮动浮动特点清除浮动高度塌陷(清浮动) 定位相对定位绝对定位固定定位层级浮动 float:方向让块级元素在一行 <!DOCTYPE html> &l ...
php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动
这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章先看一张效果图思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...
layui table 滚动键盘
layui table翻页滚动条位置保持不变 2018年06月24日 07:30:53 cp1300 阅读数:1589 版权声明: https://blog.csdn.net/cp1300/artic ...
HTML-浮动（特点-影响-居中）-定位
浮动(特点-影响-居中)-定位 1 回顾 1. 盒子模型1.1 盒子的显示模式1.2 盒子模型的组成1.3 盒子的内容区域1.4 内边距1.5 边框1.6 外边距1.7 溢出内容的显示方式1.8 如何 ...
selenium 表单提交结果_了解 Selenium 定位方式
※元素定位的重要性:在于查找元素 And 执行元素定位元素的三种方法 1.定位单个元素:在定位单个元素时,selenium-webdriver 提示了如下一些方法对元素进行定位.在这些定位方式中,优 ...

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

说说table下面定位层级的问题相关推荐

最新文章

热门文章