首页新闻找找看学习计划

IE6、IE7下的z-index问题

0
悬赏园豆:20 [已解决问题] 解决于 2013-06-04 14:33

有html结构如下:

<div class="wrap">
        <div class="fl-wrap">
            left
        </div>
        <div class="fr-wrap">
            <ul>
                <li>
                    <div class="fl">
                        <div class="pmt-wrap">
                            <a class="pmt">
                                鼠标经过时,显示div
                            </a>
                            <div class="pmt-detail">
                                ...
                            </div>
                        </div>
                    </div>
                    <div class="fr">
                        right
                    </div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="fl">
                        <div class="pmt-wrap">
                            <a class="pmt">
                                鼠标经过时,显示div
                            </a>
                            <div class="pmt-detail hidden">
                                ...
                            </div>
                        </div>
                    </div>
                    <div class="fr">
                        right
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>

相关CSS:

.wrap{
    border:1px solid red;
    height:300px;
    padding:10px;
    width:500px;
}
.fl-wrap{
    border:1px solid green;
    float:left;
    height:100px;
    width:50px;
}
.fr-wrap{
    border:1px dashed blue;
    float:right;
    height:300px;
    width:440px;
}
ul{
    margin:0;
    padding:0;
}
.fr-wrap li{
    border:1px solid #000;
    height:100px;
    list-style-type:none;
    margin:5px;
    padding:5px;
     
}
.clear{
    clear:both;
    height:0;
    overflow:hidden;
}
.fr-wrap .fl{
    border:1px dashed red;
    float:left;
    height:100%;
    width:140px;
}
.fr-wrap .fr{
    border:1px dashed blue;
    float:right;
    height:100%;
    width:260px;
}
.fl .pmt-wrap{
    position:relative;
    *z-index:2;
}
.fl .pmt{
    cursor:pointer;
    font-size:12px;
    margin:5px;
    padding:0;
    position:relative;
    z-index:1;
}
.fl .pmt-detail{
    background-color:#fff;
    border:1px solid #ccc;
    height:200px;
    left:5px;
    position:absolute;
    top:16px;
    width:100px;
    z-index:3;
}
.hidden{
    display:none;
}

火狐下的效果(希望得到的效果):

IE6下的效果:

 

 

已经有按照网络上查到的方法,给.pmt-wrap加上了z-index,但是好像不起作用

Be_violet的主页 Be_violet | 初学一级 | 园豆:138
提问于:2013-04-27 09:44
< >
分享
最佳答案
1

配合position使用才会起作用的

收获园豆:20
SOUTHER | 小虾三级 |园豆:825 | 2013-04-27 09:53

有加了。但是还是没反应

Be_violet | 园豆:138 (初学一级) | 2013-04-27 10:04

@Be_violet: 

试试:给其父级元素加上z-index
SOUTHER | 园豆:825 (小虾三级) | 2013-04-27 10:07

@SOUTHER: 嗯,后来解决了。得结合JQuery才可以..动态地单独给父级元素加上z-index。

Be_violet | 园豆:138 (初学一级) | 2013-06-04 14:33
其他回答(1)
1

这个是什么问题,没有遇到过,楼上说的方法应该可以的

不负春光,努力生长 | 园豆:1382 (小虾三级) | 2013-04-27 11:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册