让relative容器里的元素的z-index高于body下的遮照层

结构大致如下：

<html>
<head>
</head>

<body>
    <div id="main">
        <div id="operate">
            [操作][操作][操作][操作][操作]
        </div>
        <div id="relativePanel" class="allowScroll">
                 <div id="wantoPop">东西东西东西东西东西东西
      </div>

        </div>
    </div>
    <div id="mask"></div>
</body>
</html>
 
由于某种需要，紫色的  relativepanel 需要使用 相对定位。而当它的子元素需要做pop 效果的时候，z-index 怎么设 都会被红色的 mask 挡住，尽管本意是 mask 挡住页面， wantoPop 在 mask 之上。
 
解决办法 是把该死的 relativepanel 的 position:relative 去掉，当然，在不影响原有效果的情况下（加relative也是有深意的啊……）
另一种是，将 wantoPop 提出来，跟它老爸分家，使用 $('body').append($('#wantoPop').detach()); 将它移到 body 根下。形成效果如下：
需要注意的是，移动之后，如果有跟上级关联的样式需要特殊处理。
 
  
<html>
<head>
</head>

<body>
    <div id="main">
        <div id="operate">
            [操作][操作][操作][操作][操作]
        </div>
        <div id="relativePanel" class="allowScroll">
                    </div>
    </div>
    <div id="mask"></div>
     <div id="wantoPop">东西东西东西东西东西东西
      </div>

</body>
</html>
 
posted @ 2011-06-24 16:15  life++  阅读(770)  评论(0)  编辑  收藏  举报