z-index失效问题

顽石开化 2014-07-18 09:57:00

我需做一table，table内每个td里包含的内容由于非常多，我想让用户浏览整个表格时，每个td只显示部分内容，当鼠标悬浮于某个td上后，让td内的内容全部悬浮在上面显示出来。因此借助z-index做了如下尝试。

下面为代码：
<div style="position:relative;z-index:1; height:300px">
<table border="1" style="position:relative;z-index:1; width:300px; border:1px solid black">
<tr>
<td width="200" height="30">
<div id="wrapdiv" style="position:relative; z-index:2; height:30px; background:#ccc; overflow:hidden">
<div id="yellowdiv" style="position:relative;z-index:100; height:60px; background:yellow">
</div>
</div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
看了关于z-index的手册，其中有这样一句：z-index 仅能在定位元素上奏效（position 属性值为 relative 或 absolute 或 fixed的对象），因此给各个层的position都定义为了relative，但无效。（没有wrapdiv，td的高度很难限定，因此我只好借助于wrapdiv来来限定td的高度，如果您有限定td高度的办法，还请一并告诉我）
下图为上面代码显示效果：

我本意是想让yellowdiv借助z-index为100的值悬浮在其他层上面，达到下面图示效果，但上面代码未奏效，yellowdiv还是被其他层隐藏起来了，为什么会这样呢？z-index为什么会失效呢？我该怎么修改才能让yellowdiv悬浮在其他层上面呢？（另：在语法结构上，我想让yellowdiv包含在td内），请哪位大侠帮忙下。

...全文

752 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

顽石开化 2014-07-20

打赏
举报

多谢提示并给例，但我的问题楼上并未真正看出，我的问题在于多了个overflow:hidden。结贴

豪情 2014-07-18

打赏
举报

你这样写，有这么几点需要说明一下： 1. 没有真正的理解position,relative,absolute的威力。 2. position:relative在多个父级上，在ie7下面会有一些莫名的bug，就是会找不到相应的节点去。他们真正的组合是：外容器position:relative;里边容器position:absolute;那么里容器会以外容器的左上角为参考点进行位置定位。就算真正理解了position的布局这里边也是有z-index坑的，z-index的定位是参考父级元素的，是拼爹的。如果让黄色区域覆盖掉他叔叔们的背景色，那他的父级z-index必须要大，但是这个大了，其它的没办法进行实时的显示了，所以这时候需要灵活的处理relative;不是把他写死，而是让他那个显示就加在那个上面。 3. 没有真正理解css,js的神奇结合。一个前端任务需求，有时候js主导，有时候css主导，像这个效果，完全是css在主导。 4. 这里边还用到css的继承特性，简单讲是覆盖，用一个超级父类去重写子类的属性。其实就是面向对象里边的覆盖。简单的用法。基于上面个人的分析，给出下面的demo，代码比较乱，仅供参考。 demo here. 最后原谅我把随手听的几首歌词来分享一下：前方的路虽然太凄迷请在笑容里为我祝福虽然迎著风虽然下著雨我在风雨之中念著你没有你的日子里我会更加珍惜自己。原谅我这一生不羁放纵爱自由也会怕有一天会跌倒被弃了理想谁人都可以哪会怕有一天只你共我今天我寒夜里看雪飘过怀着冷却了的心窝飘远方。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        .tab{border-collapse:collapse; border:1px solid #ccc;}
        .tab td{ height:30px; border:1px solid #ccc; padding:3px;}
        .super .parent{ position:relative;height:58px; overflow:visible; }
        .super .sub{ position:absolute;background: #f5e6c2; border:1px solid #f09134;box-shadow:1px 1px 1px 1px #f0f0f0}
        .parent{z-index:2; height:30px; line-height:30px; background:#ccc;overflow: hidden;}
        .sub{z-index:100; width:300px; background:#f1f4f6}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="height:300px">
    <table id="tab" class="tab" border="1" style=" width:300px;border:1px solid black">
        <tr>
            <td width="200" height="30">
                <div class="parent">
                    <div class="sub">
                        <p>锁了门 关了窗 息了灯</p>
                        <p>闭了眼 什么正走掉</p>
                        <p>看不见 听不着 想不成</p>
                        <p>摸不到 两个人的依靠</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="parent">
                    <div class="sub">
                        <p>漫漫长夜里 未来日子里</p>
                        <p>亲爱的你别为我哭泣</p>
                        <p>前方的路虽然太凄迷</p>
                        <p>请在笑容里为我祝福</p>
                        <p>虽然迎著风 虽然下著雨</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="parent">
                    <div class="sub">
                        <p>轻轻的我将离开你</p>
                        <p>请将眼角的泪拭去</p>
                        <p>漫漫长夜里 未来日子里</p>
                        <p>亲爱的你别为我哭泣</p>
                        <p>前方的路虽然太凄迷</p>
                        <p>请在笑容里为我祝福</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="parent">
                    <div class="sub">
                        <p>你要保重你自己</p>
                        <p>你问我何时归故里</p>
                        <p>我也轻声地问自己</p>
                        <p>不是在此时 不知在何时</p>
                        <p>我想大约会是在冬季</p>
                        <p>不是在此时 不知在何时</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="parent">
                    <div class="sub">
                        <p>前方的路虽然太凄迷</p>
                        <p>请在笑容里为我祝福</p>
                        <p>虽然迎著风 虽然下著雨</p>
                        <p>我在风雨之中念著你</p>
                        <p>没有你的日子里</p>
                        <p>我会更加珍惜自己</p>
                        <p>没有我的岁月里</p>
                        <p>你要保重你自己</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="parent">
                    <div class="sub">
                        <p>多么熟悉的声音</p>
                        <p>陪我多少年风和雨</p>
                        <p>从来不需要想起</p>
                        <p>永远也不会忘记</p>
                        <p>没有天哪有地</p>
                        <p>没有地哪有家</p>
                        <p>没有家哪有你</p>
                        <p>没有你哪有我</p>
                        <p>假如你不曾养育我</p>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    $('#tab tr').hover(function(){
        $(this).addClass('super');
    }, function(){
        $(this).removeClass('super');
    })
</script>
</body>
</html>