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 作业
写回复
用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>

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧