发新贴  快速回复

ie6,7下z-index的问题

深红5
2015-07-22 19:18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body, ul, li, p, input, a, h2 {
            margin: 0;
            padding: 0;
            font-family: '宋体', Arial;
            font-size: 12px;
        }
        ul {
            list-style: none;
        }
        img {
            border: none;

        }
        a {
            text-decoration: none;
            color: #000;
        }
        h2 {
            border-bottom: 1px solid #9c9c9c;
            width: 514px;
            margin: 150px auto 0;
            
        }
        input {
            border: none;
            outline: none;
        }
        span {
            color: #9c9c9c;
        }
        .clear {
            zoom: 1;
        }
        .clear:after {
            content: "";
            display: block;
            clear: both;
        }
        #list {
            width: 494px;
            margin: 0 auto;
            padding: 6px 0 0 20px;
            
        }
        
        #list li {
            float: left;
            width: 56px;
            height:90px;
            margin-right: 24px;
            text-align: center;
            position: relative;

        }
        #list li a, #list li span {
            display: block;
        }
        #list .alert {
            width: 230px;
            height: 124px;
            border-right: 1px solid #c0c0c0;
            border-bottom: 2px solid #c0c0c0;
            position: absolute;
            left: 20px;
            top:-130px;
            display: none;
            z-index: 999;
            padding-bottom: 10px;
            background: #f7efef;
        }
        
        .title {
            height: 30px;
            background: #dee7ef;
            position: relative;
            padding: 10px;
        }
        .title p {
            font-weight: bold;
            text-align: left;
            font-size: 14px;

        }
        .title span {
            position: absolute;
            left: 10px;
            bottom: 5px;
        }
        .title input {
            background: url(img/btn.gif);
            width: 60px;
            height: 22px;
            color: #fff;
            text-align: left;
            padding-left: 27px;
            position: absolute;
            right: 10px;
            bottom: 15px;
        }
        .content {
            background: #fff;
            height: 57px;
            padding: 10px 10px 5px;
            text-align: left;
            position: relative;
        }
        .content p {
            
            line-height: 16px;
        }
        .content .star {
            position: absolute;
            left: 10px;
            bottom: 5px;
        }
        .content .add {
            position: absolute;
            right: 10px;
            bottom: 5px;
        }
        #list .content span {
            display: inline;
        }
        .content .number {
            color: #f00;
        }

    </style>
    <script type="text/javascript">
    window.onload = function () {
        var aLi = document.getElementsByTagName('li');
        for (var i=0; i<aLi.length; i++) {
            aLi[i].onmouseover = function () {
                this.getElementsByTagName('div')[0].style.display = 'block';
            }
            aLi[i].onmouseout = function () {
                this.getElementsByTagName('div')[0].style.display = 'none';
            }
        }
    }
    </script>
</head>
<body>
    <h2>最新上线</h2>
    <ul class="clear" id="list">
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/pic1.gif">
            <a href="#">娱乐观</a>
            <span>新闻类</span>
            <div class="alert">
                <div class="title">
                    <p>搜狐汽车图库</p>
                    <span>生活</span>
                    <input type="button" value="添加" class="btn">
                </div>
                <div class="content">
                    <p>搜狐汽车是中国最具人气和影响力的门户汽车网站,为您提供专业的汽车</p>
                    <span class="number star"><img src="img/star.gif"> 4.0 </span>
                    <p class="add"><span class="number">76876</span>人已添加</p>
                </div>
            </div>
        </li>
    </ul>
</body>
</html>
在做js基础教程的js2for应用的最后一个综合作业(就是一排图片,移动到每个图片,就出现一个提示框),为什么我已经给提示框(#list .alert)z-index:99了,但是在ie6,7下仍然被旁边的图片盖住了?
849800875
给父级加z-index
2015-07-23 09:12  回复本帖
深红5
forum.php?mod=redirect&goto=findpost&pid=41391&ptid=14015
给父级加z-index
我这里有12个li,如果给每个li的z-index值都相等,还是没用。但是如果给每个li的z-index从大到小给值,就有用了。所以要给每个li一个不同的z-index?那么css怎么写,难道要给每个li再多添加一个class专门写z-index?感觉有点累赘啊。
2015-07-23 20:09  回复本帖
深红5
forum.php?mod=redirect&goto=findpost&pid=41409&ptid=14015
我这里有12个li,如果给每个li的z-index值都相等,还是没用。但是如果给每个li的z-index从大到小给值,就 ...

是不是可以直接利用js,当鼠标移入li时给它一个z-index:99,移出就把z-index:0,这是我目前想到的方法
2015-07-23 20:30  回复本帖
849800875
不用,这个问题是ie6 7 8下的问题,给他们共同父级下边的那个父级加z-index
2015-07-24 09:22  回复本帖
深红5
forum.php?mod=redirect&goto=findpost&pid=41422&ptid=14015
不用,这个问题是ie6 7 8下的问题,给他们共同父级下边的那个父级加z-index

我的提示框是包在li里的,12个li是包在ul里的。你的意思是给ul加z-index?我试过给ul加position:relative; z-index:1; ie6,7下还是没有用呀
2015-07-24 18:48  回复本帖
849800875
层级只能用于同级的元素,relative是没有效果的,用absolute
2015-07-25 11:13  回复本帖
深红5
forum.php?mod=redirect&goto=findpost&pid=41450&ptid=14015
层级只能用于同级的元素,relative是没有效果的,用absolute

给ul加上position: absolute;z-index:1依旧没用
2015-07-25 11:48  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41453&ptid=14015
给ul加上position: absolute;z-index:1依旧没用

上代码吧。
2015-07-25 12:06  回复本帖
深红5
forum.php?mod=redirect&goto=findpost&pid=41454&ptid=14015
上代码吧。

我帖子最上面不是一开始就贴了代码和demo下载?
2015-07-25 15:12  回复本帖
849800875
移入加li的层级吧。
2015-07-25 16:53  回复本帖
深红5
forum.php?mod=redirect&goto=findpost&pid=41457&ptid=14015
移入加li的层级吧。

我目前想到的解决方法也是这个(是不是我写的代码有问题才导致解决ie6,7下的z-index的方法还是没用{:soso_e136:})。谢谢耐心解答。
2015-07-25 18:17  回复本帖
849800875
移入加层级没用吗?这个我试过了,可以用的。
2015-07-25 23:36  回复本帖
深红5
forum.php?mod=redirect&goto=findpost&pid=41464&ptid=14015
移入加层级没用吗?这个我试过了,可以用的。

是有用的。我是感觉这个方法是最后的妥协方法,所以觉得是不是自己原来写的的代码有点问题才导致要以这种js的方法补救。
2015-07-26 07:16  回复本帖
 
呦呦李

移入加层级该怎么写呢???谢谢

2017-05-05 19:45  回复本帖
 
呦呦李

深红5 2015-07-26 07:16发表的内容:

forum.php?mod=redirect&goto=findpost&pid=41464&ptid=14015
移入加层级没用吗?这个我试过了,可以用的。

是有用的。我是感觉这个方法是最后的妥协方法,所以觉得是不是自己原来写的的代码有点问题才导致要以这种js的方法补救。

移入加层级该怎么写呢???谢谢

2017-05-05 20:21  回复本帖
登录 后才可以发表回复