最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000"。但是现在使用angular指令,在网上找了好多例子,有直接修改css的,也有在options添加zIndexOffset的,这样对于我的项目都不适用。

  后来查看datepiker的源码,发现其z-index是在其父div的基础上+1。这样就不难发现,只要将其父div的z-index设置的合适就不会出现遮挡问题。下面附上对z-index的详细解释。

  z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

  

  层级关系的比较

  1. 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。

  2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-index越大优先级越高。

  3. IE6/7下position不为static,且z-index不存在时z-index为0,除此之外的浏览器z-index为auto。

  4. z-index为auto的元素不参与层级关系的比较,由向上遍历至此且z-index不为auto的元素来参与比较。

  顺序规则

  如果不对节点设定 position 属性,位于文档流后面的节点会遮盖前面的节点。

<div id="a">A</div>
<div id="b">B</div>

  定位规则

  如果将 position 设为 static,位于文档流后面的节点依然会遮盖前面的节点浮动,,所以 position:static 不会影响节点的遮盖关系。

<div id="a" style="position:static;">A</div>
<div id="b">B</div>

  如果将 position 设为 relative (相对定位),absolute (绝对定位) 或者 fixed (固定定位),这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点,说明前者比后者的默认层级高。

<div id="a" style="position:relative;">A</div>
<div id="b">B</div>

  在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.

<div id="a">
<div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>

  参与规则

  我们尝试不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用. z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>

<div id="a" style="z-index:2;">A</div>
<div id="b" style="position:relative;z-index:1;">B</div>
<div id="c" style="position:relative;z-index:0;">C</div>

  默认值规则

  如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.

<div id="a" style="position:relative;z-index:1;">A</div>
<div id="b" style="position:relative;z-index:0;">B</div>
<div id="c" style="position:relative;">C</div>
<div id="d" style="position:relative;z-index:0;">D</div>

  从父规则

  如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

<div id="a" style="position:relative;z-index:1;">
<div id="a-1">A-1</div>
</div> <div id="b" style="position:relative;z-index:0;">
<div id="b-1">B-1</div>
</div>

  如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

  很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级.

  参考博客:http://www.cnblogs.com/ForEvErNoME/p/3373641.html

datePiker弹出框被其他div遮挡的更多相关文章

  1. Bootstrap popover弹出框

    popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...

  2. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  3. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  4. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  5. popOver 弹出框简单使用

    1.仿QQ弹出框 1.1用到的知识点 1.1.1如何调整弹出框的大小(这里弹出的也是控制器) 这里已经有讲解过http://blog.csdn.net/iostiannan/article/detai ...

  6. php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失

    <div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...

  7. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  8. js实现弹出框跟随鼠标移动

    又是新的一天网上冲浪,在bing的搜索页面下看到这样一个效果: 即弹出框随着鼠标的移动而移动.思路大概为: 调用onmousemove函数,将鼠标的当前位置赋予弹出框即可 //html <div ...

  9. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

随机推荐

  1. 为什么是 Cloud Service?

    怀旧一把,还记得这个界面吗? 没错,这是第一版Windows Azure Management Portal,用Silverlight开发的,很炫! 奇怪,为什么没有Virtual Machine? ...

  2. date时间函数

    时间函数: date();和time();的相互转换 time();   在PHP中单位是秒,在js中是毫秒. microtime();  毫秒 date('Y-m-d H:i:s',time()); ...

  3. git创建本地分支

    git branch -b newbranch //创建并切换到newbranch分支下 git push origin newbranch //推送到远程仓库的newbranch分支下,没有就创建

  4. Easyui Tree方法扩展 - getLevel(获取节点级别)

    Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...

  5. 条件变量pthread_cond_t怎么用

    #include <pthread.h> #include <stdio.h> #include <stdlib.h> pthread_mutex_t mutex ...

  6. velocity模板引擎学习(4)-在standalone的java application中使用velocity及velocity-tools

    通常velocity是配合spring mvc之类的框架在web中使用,但velocity本身其实对运行环境没有过多的限制,在单独的java application中也可以独立使用,下面演示了利用ve ...

  7. java:快速文件分割及合并

    文件分割与合并是一个常见需求,比如:上传大文件时,可以先分割成小块,传到服务器后,再进行合并.很多高大上的分布式文件系统(比如:google的GFS.taobao的TFS)里,也是按block为单位, ...

  8. weblogic启动失败:Could not obtain the localhost address 解决办法

    linux下weblogic启动如果出现这个错误,多半是hosts文件不对 1.先输入hostname,查看本机计算机名(比如:server123) 2.sudo vi /etc/hosts 编辑ho ...

  9. c++ 指针(一)

    指针:是说指针名表示的是地址.是一个变量,存储的是值的地址,而不是值本身 *运算符被称为间接值或解除引用运算符也可以叫做取地址符 声明一个指针 int * p_data; * p_data的类型为in ...

  10. 读“日请求亿级的QQ会员AMS平台PHP7升级实践”博客心得笔记

    PHP7版本尚未普及,对于前辈们为了性能提升有勇气探索新技术敢于尝螃蟹的精神十分敬佩,倍受鼓舞. PHP7升级面临的风险和挑战 对于一个已经现网在线的大型公共Web服务来说,基础公共软件升级,通常是一 ...