问一个关于默认层叠顺序的问题

图片说明
下面的div上边框是橘黄色,当鼠标悬浮在导航的时候。上面的导航的div的下边框由无变白色。
我的问题是1.我查了源代码。 并没有设置, z-index,为啥导航的白色能默认把矩形的黄色遮盖住。2.我给导航加上z-index:1; 矩形div加上z-index:2; 结果矩形还是被导航的白色覆盖了

源码如下

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        /* CSS样式制作 */
        *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
        ul{list-style-type: none;}
        a{text-decoration: none;}

        #tab-list{width: 275px;height:190px;margin: 20px auto;}

        #ul1{border-bottom: 2px solid #8B4513;height: 32px;}
        #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
        #ul1 li:hover{cursor: pointer;}
        #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

        #tab-list div{border: 1px solid #7396B8;border-top: none; }
        #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

        .show{display: block;}.hide{display: none;}
    </style>
    <script type="text/javascript">


        window.onload = function() {
            var oUl1 = document.getElementById("ul1");
            var aLi = oUl1.getElementsByTagName("li");
            var oDiv = document.getElementById("tab-list");
            var aDiv = oDiv.getElementsByTagName("div");
            for(var i = 0; i < aLi.length; i++) {
                aLi[i].index = i;                               //.index 是自定义的属性
                aLi[i].onmouseover = function() {
                    for(var i = 0; i < aLi.length; i++) {
                        aLi[i].className = "";                  //清空导航部分之前的class名字
                    }
                    this.className = "active";                  //给鼠标悬浮的导航部分加载类
                    for(var j = 0; j < aDiv.length; j++) {
                        aDiv[j].className = "hide";              //给下面的内容部分设置通用格式(全隐藏)
                    }
                    aDiv[this.index].className = "show";            //给导航对应的部分加载类
                }
            }
        }


    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
    <ul id="ul1">
        <li class="active">房产</li><li>家居</li><li>二手房</li>
    </ul>
    <div>
        <ul>
            <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
    </div>
    <div class="hide">
        <ul>
            <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
            <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
            <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
            <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
        </ul>
    </div>
    <div class="hide">
        <ul>
            <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
            <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
            <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
            <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
        </ul>
    </div>
</div>


</body>
</html>

1个回答

是active的下面白色边框覆盖的,如果父元素没有设置overflow:hidden隐藏溢出的内容,那么溢出的容器内容会覆盖住父元素,这个active的css类刚好设置了底部的2px白色边框溢出到父元素ul的下边框覆盖住了,所以出现你这种效果

不用边框覆盖也行,你设置active的背景色为白色的,高度设置高点溢出覆盖住就行了,下面特别加高active的高度,设置为白色,增加一个黑色的底部边框,你就明白内容溢出覆盖的效果了

              #ul1 li.active {
                    border-top: 2px solid #8B4513;
                    height:35px;
                    background:#fff;/*通过背景色覆盖ul的下边框*/
                    border-bottom: 2px solid #000;/*active的下边框在ul下边框下面*/
                }
qflyalltime
小羊也疯狂 回复showbo: 开始没定容,两个边框并排出现。后来height设小了,两个边框分离,3再算了一下设立height和line-height,正确了。最后想了一下,只需要按默认width设line-height即可
大约 3 年之前 回复
qflyalltime
小羊也疯狂 字符串那个我还没整懂,记下来了慢慢研究吧。 昨天你这个漏说了个很关键的东西,定容父容器。今天早上重写的时候我也忘了写,研究了好久子容器的heiht,line-height,border与父容器height,border的关系。感觉我的第一篇技术文章可以出来了........
大约 3 年之前 回复
showbo
支付宝加好友偷能量挖 回复小羊也疯狂: http://ask.csdn.net/questions/367104这个没问题采纳下啊,O(∩_∩)O哈哈~
大约 3 年之前 回复
qflyalltime
小羊也疯狂 懂了。
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问