新手请教 z-index分层问题.

遇到问题,折腾了很久 就是弄不好 ,只好请教高手了!就是一个下来菜单的问题. 鼠标移动到 第A 框时, 下面的 隐藏第一 框 出现.但是隐藏框 就是在第A框的上面, z-index 设的很大了.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{font-size:12px;}
#pp {background:#eee;
width:290px;height:40px;
margin:0;padding:0;text-align:center;
}
#pp .button{width:80px; height:38px ;
background:#555;border:1px solid red;
margin:0 5px 0 0;padding:0; line-height:40px;
display:block;float:left;
position:relative;top:2px;z-index:100}
#b1,#b2,#b3{width:140px;height:120px;color:#888;
margin:0;padding:0;float:left;
background:#fff;border-width:1px;border-style:solid; border-color: black; /* border:1px solid greed;*/
position:absolute;left:-1px;top:30px;z-index:-500;
display:none ;font-size:12px;}
#pp .gaoliang{ background:#fff;
font-size:20px;font-weight:bold;
border-color:red red #fff red;color:red; 
}
</style>
</head><body>
<div id="pp">
<a class="button" id="but1"><div id="b1">第A</div>第一</a>
<a class="button" id="but2"><div id="b2">第B</div>第二</a>
<a class="button" id="but3"><div id="b3">第C</div>第三</a>
</div>
</body>
<script>
function $(b){return document.getElementById('pp').getElementsByTagName(b)} //函数直接代替 方便找到
for(i=0; i< $('a').length; i++){ //遍历所有a标签
$('a')[i].onmouseover=function (){ //当某个被移动到
for(j=0; j<$('a').length; j++){ //遍历所有a标签
   $('a')[j].childNodes[0].style.display='none'; //所有a下的下拉菜单全部变不现实
   this.childNodes[0].style.display='block';//自己的孩子菜单显示
   this.className +=' gaoliang';
}
}
$('a')[i].onmouseout=function (){//当鼠标移出
this.childNodes[0].style.display='none';//自己的孩子菜单也不显示
this.className ='button';//自己变为原有样式
}
}
</script>
</html>

解决方案 »

  1.   

    哥去 html /div / css  版块问吧
    出门转左就是了
      

  2.   

    <style>
    #a{width: 100px; height: 100px; background: red; position: absolute; left: 0px; top: 0px; z-index: 100;}
    #b{width: 100px; height: 100px; background: green; position: absolute; left: 25px; top: 25px; z-index: 150;}
    #c{width: 100px; height: 100px; background: blue; position: absolute; left: 50px; top: 50px; z-index: 100;}
    </style>
    <div id="a">
      <div id="b"></div>
    </div>
    <div id="c">
    </div>你可以用上面代码来研究z-index兄弟节点: z-index值决定高低, 相同z-index, 则看文档流中元素的顺序
    叔侄节点: (就是你遇到的情况), 叔是"第二"那个菜单, 侄是"第A", 父是"第一". 应用兄弟规则, 知道"叔比父高", 老爹不行, 孩子再牛逼还是不入叔的....遗传了...貌似是这么讲的...不到之处, 请指正
      

  3.   


    参考一下：CSS z-index 属性
    CSS 参考手册
    定义和用法
    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    注释：元素可拥有负的 z-index 属性值。
    注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
    说明
    该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
    默认值： auto
    继承性： no
    版本： CSS2
    JavaScript 语法： object.style.zIndex="1"
    实例
    设置图像的 z-index：
    img
      {
      position:absolute;
      left:0px;
      top:0px;
      z-index:-1;
      }
    TIY
    浏览器支持
    所有主流浏览器都支持 z-index 属性。
    注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
    可能的值
    值 描述
    auto 默认。堆叠顺序与父元素相等。
    number 设置元素的堆叠顺序。
    inherit 规定应该从父元素继承 z-index 属性的值。
      

  4.   

    CSS中的position 和z-index
     属性position，指定元素的定位方式，讲解三个值：static,relative,absolute;定位方式选定后，就通过如下四个偏移属性来指定它所定位到的位置：top,left,rigth,bottom;
    所需具备的认识：默认情况下，如果不指定定位方式，系统将默认为static值；文档流：就是HTML标签集；对于static：可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有
    取值为static的对象都按照你所编写的html标签的顺序依次呈现，我们可以认为这就是一个默认的文档流：所有标签的position都
    采用默认值：static，所形成的文档流。对于absolute这种绝对定位方式，指定此属性值的元素的四个偏移属性是相对于窗口的，而且这个元素也将从默认的文档流中脱离
    出来，与默认的文档流形成一种并列关系（可以视它为用户自定义的文档流），它在默认文档流中的位置也可以被后面的元素占用
    ，当然，此元素也可能会覆盖前面某些元素；
    对于relative:这种相对定位，指定此属性值的元素还保留在默认的文档流中，也就是说，它同样占有在默认文档流中的固定位置，
    后面的对象不会侵占或覆盖它，而此元素真实出现的位置将会相对于其在默认文档流中的位置发生偏移，偏移量将根据四个偏移属
    性指定的值而定；属性z-index（Z轴）：指定元素的重叠次序，也以认为是自定义文档流间以及与默认文档流间的重叠关系；大值元素覆盖小值元素；本属性生效条件是：元素要是飘动的：正确的指定position属性，将四大偏移属性的值指定得合理让元素在布局上有交叉有重叠！
      

  5.   

    建议还是先看看相关基础：Z-index是什么？CSS Z-index是什么意思？Z-index的作用如何（详细吃透Z-index）
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body{font-size:12px;}
    #pp {background:#eee;
    width:290px;height:40px;
    margin:0;padding:0;text-align:center;
    }
    #pp .button{width:80px; height:38px ;
    background:#555;border:1px solid red;
    margin:0 5px 0 0;padding:0; line-height:40px;
    display:block;float:left;
    position:relative;top:2px;}
    #b1,#b2,#b3{width:140px;height:120px;color:#888;
    margin:0;padding:0;float:left;
    background:#fff;border-width:1px;border-style:solid; border-color: black; /* border:1px solid greed;*/
    position:absolute;left:-1px;top:30px;z-index:1500;
    display:none ;font-size:12px;}
    #pp .gaoliang{ background:#fff;
    font-size:20px;font-weight:bold;
    border-color:red red #fff red;color:red;  
    }
    </style>
    </head><body>
    <div id="pp">
    <a class="button" id="but1"><div id="b1">第A</div>第一</a>
    <a class="button" id="but2"><div id="b2">第B</div>第二</a>
    <a class="button" id="but3"><div id="b3">第C</div>第三</a>
    </div>
    </body>
    <script>
    function $(b){return document.getElementById('pp').getElementsByTagName(b)} //函数直接代替 方便找到
    for(i=0; i< $('a').length; i++){ //遍历所有a标签
    $('a')[i].onmouseover=function (){ //当某个被移动到
    for(j=0; j<$('a').length; j++){ //遍历所有a标签
    $('a')[j].childNodes[0].style.display='none'; //所有a下的下拉菜单全部变不现实
    this.childNodes[0].style.display='block';//自己的孩子菜单显示
    this.className +=' gaoliang';
    }
    }
    $('a')[i].onmouseout=function (){//当鼠标移出
    this.childNodes[0].style.display='none';//自己的孩子菜单也不显示
    this.className ='button';//自己变为原有样式
    }
    }
    </script>
    </html>//去掉了#pp .button的z-index