惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

N
Netflix TechBlog - Medium
博客园 - 三生石上(FineUI控件)
Martin Fowler
Martin Fowler
博客园 - 【当耐特】
雷峰网
雷峰网
宝玉的分享
宝玉的分享
IT之家
IT之家
J
Java Code Geeks
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Jina AI
Jina AI
博客园 - 叶小钗
V
Visual Studio Blog
Engineering at Meta
Engineering at Meta
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
月光博客
月光博客
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
云风的 BLOG
云风的 BLOG
美团技术团队
爱范儿
爱范儿
T
The Blog of Author Tim Ferriss
L
LangChain Blog
U
Unit 42
有赞技术团队
有赞技术团队
博客园_首页

博客园 - life++

multer /busboy 上传文件无法完成回调问题 linux系统上搭建egret构建环境(针对5.3.x 版以上) android studio 2.0 Gradle HttpProxy 设置 javascript的 parseInt 曾经的“陷井”在IE10上不见了,但还是得注意! 无法将类型为“xxxx”的对象强制转换为类型“Microsoft.SharePoint.WebPartPages.WebPart”。 ajax 12301 原因小结 被人忽悠完成的56.com我秀聊天室群发软件 WebDav基于Exchange2003开发邮件收发系统 fiddler 调试 WebDav 引起400错误处理 HTML-JS中的单双引混合处理原则 [笔记]443端口没开放让svn https连接不上 ora10ginstant 精简客户端遇到 system.data.oracleclient 需要 oracle 客户端软件8.1.7 或更高版本 手动调用__doPostBack('xx','') 在IE6, 下留意 javascript:void(0);问题。 [原]SWFUpload 在IE9下不显示问题及IE9中模态窗下flash文件选择问题的处理 JQuery-easyui accordion 滚动条在IE6下“丢失”的处理 asp.net Ajax 页中使用jquery-easyui的显示问题处理 equal 与 == 自问自答 胡乱写个 List string 类型排序。
让relative容器里的元素的z-index高于body下的遮照层
life++ · 2011-06-24 · via 博客园 - life++

结构大致如下:

<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>