willwei/zindex.md

## zindex.md

      
    Raw
  

              zindex.md
            
          
    #问题描述:
##环境
IE全家
##具体描述
<!doctype html>


<title>normal mode</title>

<style>
    #content {
        width: 990px;
        margin: 50px auto;
        position: relative;
    }

    .side-nav-wrapper {
        position: absolute;
        right: -50px;
        top: 0;
        width: 0;
        height: 0;
    }

    .side-nav {
        position: fixed;
        top: 150px;
        width: 80px;
        overflow: hidden;
        text-align: center;
        _position: absolute;
        _bottom: auto;
        _top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight - 150);
    }

    .side-nav a {
        color: #fff !important;
    }

    .side-nav-bg {
        position: absolute;
        z-index: -1;
        left: 0;
        top: 1px;
        width: 100%;
        height: 100%;
        background: #f50;
        border-radius: 40px 40px 5px 5px;
    }

    .nav-hd {
        float: left;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 78px;
        font-family: "microsoft yahei";
        letter-spacing: 2px;
        text-shadow: 0 0 10px #fff;
        background: #333;
        background: -webkit-radial-gradient(#000, #333);

        margin-bottom: 0\9;
        *margin-bottom: 0\9;
        _margin-bottom: 0\9;
    }

    .nav-item {
        float: left;
        width: 100%;
        height: 32px;
        color: #fff;
        line-height: 30px;
        margin-top: 5px;
        border-top: 1px solid #f70;
        border-bottom: 1px solid #f70;
        margin-top: -1px;
        _background: #f50;
        transition: background .3s;
    }

    .back-top {
        float: left;
        height: 40px;
        width: 100%;
        line-height: 40px;
        _background: #f50;
    }

    .cur-nav {
        background: #333;
    }
    .etao-wrap {
      width: 100%;
      height: 1000px;
      position: relative;
    }
    .etao-wrap .act-header {
        background: #333;
    }
    .etao-wrap .act-header .title {
      width: 990px;
      margin: 0 auto;
      height: 400px;
      background: #000;
    }

    </style>
    <script src="http://g.tbcdn.cn/kissy/k/1.3.0/kissy-min.js" charset="utf-8"></script>
</head>
<body>

<div class="etao-wrap">
    <div class="act-header">
        <div class="title">
            <div id="share" class="act-btn btn-share">分享</div>
        </div>
    </div>
</div>
<div id="content">
    <div class="side-nav-wrapper">
        <div class="side-nav" id="J_SideNav">
            <div class="side-nav-bg"></div>
            <a href="http://star.taobao.com" target="_blank" class="nav-hd">sideNav</a>
            <a href="javascript:void(0)" target="_blank" class="nav-item-1 nav-item">nav-1</a>
            <a href="javascript:void(0)" target="_blank" class="nav-item-2 nav-item">nav-2</a>
            <a href="javascript:void(0)" target="_blank" class="nav-item-3 nav-item">nav-3</a>
            <a href="javascript:void(0)" target="_blank" class="nav-item-4 nav-item">nav-4</a>
            <a href="javascript:void(0)" target="_blank" class="nav-item-5 nav-item">nav-5</a>
            <a href="javascript:void(0)" target="_blank" class="back-top">返回顶部</a>
        </div>
    </div>
</div>

</body>
</html>

##问题的解决方案
在div#content上加上position:releative;z-index:0;
##原理
###W3C
同一个层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别的框会根据文档树中的位置，按照前后倒置的方式显示。
根元素形成根层叠上下文。其他层叠上下文由任何 'z-index' 计算后的值不是 "auto" 的定位元素生成。
不同层叠上下文中，元素显示顺序以父级层叠上下文的层叠级别来决定显示的先后顺序。与自身的层叠级别无关。
###IE
z-index 值为正时的定位顺序要高于 z-index 值为负（或较小值）时的定位顺序。